it-swarm.com.de

Kein 'Access-Control-Allow-Origin'-Header in der App Angular 2

Für dieses Projekt lerne und übe ich gerade Angular 2. Ich habe keine Server-Seite und mache API-Anfragen an barchart ondemand api .

Ich frage mich, ob es möglich ist, die Frage der Korsage zu umgehen. Ich bin immer noch ziemlich neu bei all dem, also werden Anweisungen für Babys wirklich geschätzt! Ich benutze http://localhost:8080.

Fehlermeldung: (API-Schlüssel auskommentiert) 

XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

StockInformationService:

import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class StockInformationService {
    private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&";

    constructor (private _http: Http) {}

    getData(symbol: string): Observable<any> {
        // Tried adding headers with no luck
        const headers = new Headers();
        headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Access-Control-Allow-Methods', 'GET');
        headers.append('Access-Control-Allow-Origin', '*');

        return this._http.get(this.apiRoot + "symbol=" + symbol + "&type=daily&startDate=20150311000000", {headers: headers})
            .map(response => response.json());
    }
}

App-Komponente:

import {Component} from "angular2/core";
import {VolumeComponent} from '../../components/volume/volume';
import {StockInformationService} from '../../core/stock-information.service';

@Component({
    selector: 'app-Shell',
    template: require('./app-Shell.html'),
    directives: [VolumeComponent],
    providers: [StockInformationService]
})
export class AppShell {
    constructor(private _stockInformationService: StockInformationService) {}

    // In my template, on button click, make api request
    requestData(symbol: string) {
        this._stockInformationService.getData(symbol)
            .subscribe(
                data => {
                    console.log(data)
                },
                error => console.log("Error: " + error)
            )}
    }

}

In meiner Konsole der requestData-Fehler: Error: [object Object]

41
philip yoo

Dies ist ein Problem mit der CORS-Konfiguration auf dem Server. Es ist nicht klar, welchen Server Sie verwenden, aber wenn Sie Node + express verwenden, können Sie es mit dem folgenden Code lösen

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

dieser Code war eine Antwort von @jvandemo auf eine sehr ähnliche Frage.

36
Pablo Ezequiel

Mehr darüber können Sie hier lesen: http://www.html5rocks.com/de/tutorials/cors/ .

Ihre Ressourcenmethoden werden nicht getroffen, sodass ihre Kopfzeilen niemals festgelegt werden. Der Grund ist, dass es eine sogenannte Preflight-Anfrage vor der eigentlichen Anfrage gibt, bei der es sich um eine OPTIONS-Anfrage handelt. Der Fehler rührt daher, dass die Preflight-Anforderung nicht die erforderlichen Header erzeugt. Überprüfen Sie, ob Sie Folgendes in Ihre .htaccess-Datei einfügen müssen:

Header set Access-Control-Allow-Origin "*"
16
Nitheesh K P

Ich hatte auch das gleiche Problem bei der Verwendung von http://www.mocky.io/ . Was ich getan habe, ist in mock.io Response Header hinzuzufügen: Access-Control-Allow-Origin

Um es dort hinzuzufügen, müssen Sie nur auf erweiterte Optionen klicken

Mock.io Header Example Danach konnte meine Anwendung die Daten von einer externen Domäne abrufen.

6
Abner

Sie können einfach in php Datei als einstellen

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
5

Ich habe viel Zeit für die Lösung aufgewendet und habe es endlich fertig gebracht, indem ich Änderungen auf der Serverseite vorgenommen habe. Überprüfen Sie die Website https://docs.Microsoft.com/en-us/aspnet/core/security/cors

Es funktionierte für mich, als ich Corse auf der Serverseite aktivierte. Wir verwendeten Asp.Net Core in API und der folgende Code funktionierte

1) Addcors in ConfigureServices of Startup.cs hinzugefügt

public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddMvc();
    }

2) UseCors in Configure-Methode wie folgt hinzugefügt:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder =>builder.AllowAnyOrigin());
        app.UseMvc();
    }
4
satish

Leider handelt es sich nicht um einen Angular2-Fehler. Dies ist ein Fehler, den Ihr Browser ausführt (d. H. Außerhalb der App).

Dieser CORS-Header muss diesem Endpunkt auf dem Server hinzugefügt werden, bevor Sie irgendwelche Anforderungen stellen können. 

4
drewwyatt

Ich bin auch auf das gleiche Problem gestoßen und habe den folgenden Weg gefunden, um dieses Problem zu lösen.

schritt 1:

$ npm install --save-dev http-proxy-middleware

schritt 2:

fügen Sie einen Proxy hinzu, wenn Sie Web-API abrufen. Wenn Sie Lite-Server verwenden, können Sie eine Datei bs-config.js hinzufügen.

//file: bs-config.js
var proxyMiddleware = require('http-proxy-middleware');

module.exports = {
    server: {
        middleware: {
            1: proxyMiddleware('/example-api', {
                target: 'http://api.example.com',
                changeOrigin: true,
                pathRewrite: {
                '^/news-at-api': '/api'
                }
            })
        }
    }
};

hoffe das hilft.

3
Jun

Wenn Sie ein Mockup mit SoapUI erstellen, einem kostenlosen Testwerkzeug für die Anforderung und Antwort von REST und SOAP, sollten Sie bei Angular 2+ -Anwendungen die Eingabe in Ihrer http-Header-Anforderung berücksichtigen 

 Access-Control-Allow-Origin :  *

Ich füge zwei Bilder hinzu, um das Einfügen zu erleichtern. Das erste zeigt die Kopfzeile, die Sie hinzufügen sollten. Wenn Sie die Kopfzeile hinzufügen möchten, müssen Sie auf die Plus-Schaltfläche klicken (sie ist grün).

 First image

Das zweite Bild zeigt das Einfügen der *. Der Wert * erlaubt es, alle Anfragen von verschiedenen Hosts zu akzeptieren.

 Second image

Nach dieser Arbeit hat meine Angular-Anwendung diesen ärgerlichen Fehler in meiner Konsole entfernt.

 error inside console

Eine große Hilfe, die mir beim Verstehen meines ersten Modells geholfen hat, ist dieses Video . Es hilft Ihnen beim Erstellen eines neuen Modells in der SoapUi-Umgebung ohne Serverseite.

1
Luca Basilico

Ich hatte das gleiche Problem, als ich Angular5 übte. Dann stieß ich auf https://spring.io/guides/gs/rest-service-cors/ - , was mir half, das Problem zu lösen.

Ich habe @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") bei meiner Anforderungsmapping-Methode beibehalten. Wir können dies auch in einer Spring Boot-Anwendung global konfigurieren.

1
Sudheer Kumar

Ein anderer einfacher Weg, ohne etwas zu installieren

  1. HTTP-Funktion

    authenticate(credentials) {
    
    let body = new URLSearchParams();
    body.set('username', credentials.username);
    body.set('password', credentials.password);
    
    return this.http.post(/rest/myEndpoint, body)
      .subscribe(
      data => this.loginResult = data,
      error => {
        console.log(error);
      },
      () => {
      // function to execute after successfull api call
      }
      );
     }
    
  2. Erstellen Sie eine proxy.conf.json-Datei

    {
     "/rest": {
    "target": "http://endpoint.com:8080/package/",
    "pathRewrite": {
      "^/rest": ""
    },
    "secure": false
    }
    }
    
  3. dann ng serve --proxy-config proxy.conf.json (oder) öffne package.json und ersetze es 

    "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
     },
    

und dann npm start

Das ist es.

Überprüfen Sie hier https://webpack.github.io/docs/webpack-dev-server.html nach weiteren Optionen 

0
Sibiraj

Ich habe den gleichen Fehler erhalten und hier, wie ich es gelöst habe, indem ich Ihrem Federsteuergerät Folgendes hinzugefügt habe:

@CrossOrigin(origins = {"http://localhost:3000"})
0
Moh-Othmanovic