Nessuna intestazione ‘Access-Control-Allow-Origin-‘ nell’app Angular 2

Per questo progetto, sto solo imparando e praticando Angular 2. Non ho alcun lato server e sto facendo richieste API a barchart ondemand api .

Mi chiedo se sia ansible aggirare il problema del cors. Sono ancora abbastanza nuovo per tutto questo, quindi le istruzioni di baby-step sono davvero apprezzate! Sto usando http://localhost:8080 .

Messaggio di errore: (chiave api commentata)

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

Componente dell’app:

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

Nella mia console, la richiestaData Error: Error: [object Object]

Questo è un problema con la configurazione CORS sul server. Non è chiaro quale server stai usando, ma se stai usando Node + Express puoi risolverlo con il seguente codice

 // 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 (eg in case you use sessions) res.setHeader('Access-Control-Allow-Credentials', true); // Pass to next layer of middleware next(); }); 

quel codice era una risposta di @jvandemo a una domanda molto simile.

Puoi leggere ulteriori informazioni a riguardo qui: http://www.html5rocks.com/en/tutorials/cors/ .

I tuoi metodi di risorsa non verranno colpiti, quindi le loro intestazioni non verranno mai impostate. Il motivo è che esiste una richiesta di preflight prima della richiesta effettiva, che è una richiesta OPTIONS. Quindi l’errore deriva dal fatto che la richiesta di verifica preliminare non produce le intestazioni necessarie. verifica che dovrai aggiungere quanto segue nel tuo file .htaccess:

 Header set Access-Control-Allow-Origin "*" 

Ho anche avuto lo stesso problema durante l’utilizzo di http://www.mocky.io/ cosa ho fatto è stato aggiunto nell’intestazione di risposta mock.io: Access-Control-Allow-Origin *

Per aggiungerlo, è sufficiente fare clic sulle opzioni avanzate

Mock.io Header Example Una volta eseguita questa operazione, la mia applicazione è stata in grado di recuperare i dati dal dominio esterno.

Sfortunatamente, non si tratta di un errore Angular2, si tratta di un errore in cui si sta verificando il tuo browser (ovvero al di fuori della tua app).

L’intestazione CORS dovrà essere aggiunta a quell’endpoint sul server prima di poter fare QUALSIASI richiesta.

Ho anche riscontrato lo stesso problema e ho passato il seguente modo per risolvere questo problema.

passo 1:

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

passo 2:

aggiungi un proxy quando prendo web api, se usi lite-server puoi aggiungere un file bs-config.js.

 //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' } }) } } }; 

spero che questo ti aiuti.

Semplicemente puoi impostare il file php come

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

Ho dedicato molto tempo alla soluzione e ho finalmente funzionato apportando modifiche sul lato server. Controlla il sito Web https://docs.microsoft.com/en-us/aspnet/core/security/cors

Ha funzionato per me quando ho triggersto corse sul lato server. Stavamo usando il core Asp.Net in API e il codice seguente funzionava

1) Aggiunte aggiunte in ConfigureServices di Startup.cs

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

2) Aggiunto UseCors nel metodo Configure come di seguito:

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

Un altro modo semplice, senza installare nulla

  1. Funzione HTTP

     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. Creare un file proxy.conf.json

     { "/rest": { "target": "http://endpoint.com:8080/package/", "pathRewrite": { "^/rest": "" }, "secure": false } } 
  3. quindi ng serve --proxy-config proxy.conf.json (o) apre package.json e sostituisce

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

e poi npm start

Questo è tutto.

Controlla qui https://webpack.github.io/docs/webpack-dev-server.html per ulteriori opzioni

Se stai creando un mock-up con SoapUI , uno strumento di test gratuito per richieste e risposte REST e SOAP, per l’applicazione Angular 2+ dovresti ricordare di impostare la tua richiesta di intestazione http

  Access-Control-Allow-Origin : * 

Aggiungo due immagini per aiutare il tuo inserto. Il primo mostra l’intestazione che dovresti aggiungere. Se si desidera aggiungere l’intestazione prima di dover fare clic sul pulsante più (è verde).

Prima immagine

La seconda immagine mostra l’inserto *. Il valore * consente di accettare tutte le richieste da diversi host.

Seconda immagine

Dopo questo lavoro la mia applicazione Angular ha rimosso questo fastidioso errore nella mia console.

errore all'interno della console

Un grande ricorso che mi ha aiutato a capire per aver creato il mio primo mock up è questo video . Ti aiuterà a creare un nuovo mock-up all’interno dell’ambiente di SoapUi senza un lato server.

Ho ottenuto lo stesso errore e qui come ho risolto, aggiungendo quanto segue al controller di spring:

 @CrossOrigin(origins = {"http://localhost:3000"}) 

Ho avuto lo stesso problema quando stavo praticando Angular5. Poi mi sono imbattuto in https://spring.io/guides/gs/rest-service-cors/ che mi ha aiutato a risolvere il problema.

Ho mantenuto @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") nel mio metodo di mapping delle richieste. Possiamo anche configurarlo globalmente in un’applicazione di avvio di spring.