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

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 "*"

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

Danach konnte meine Anwendung die Daten von einer externen Domäne abrufen.

Sie können einfach in php Datei als einstellen

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

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();
    }

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. 

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.

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).

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

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

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.

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.

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 

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"})