Sin encabezado ‘Access-Control-Allow-Origin’ en la aplicación Angular 2

Para este proyecto, solo estoy aprendiendo y practicando Angular 2. No tengo ningún lado del servidor y estoy haciendo solicitudes de API para barchart ondemand api .

Me pregunto si es posible eludir el problema cors. Todavía soy bastante nuevo en todo esto, ¡así que las instrucciones de paso de bebé son realmente apreciadas! Estoy usando http://localhost:8080 .

Mensaje de error: (clave de la API comentada)

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 de la aplicación:

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

En mi consola, el requestData Error: Error: [object Object]

Esto es un problema con la configuración de CORS en el servidor. No está claro qué servidor está utilizando, pero si está utilizando Node + express puede resolverlo con el siguiente código

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

ese código fue una respuesta de @jvandemo a una pregunta muy similar.

Puede leer más sobre eso desde aquí: http://www.html5rocks.com/en/tutorials/cors/ .

Sus métodos de recursos no recibirán ningún golpe, por lo que sus encabezados nunca se establecerán. La razón es que hay lo que se llama una solicitud de verificación previa antes de la solicitud real, que es una solicitud de OPCIONES. Por lo tanto, el error proviene del hecho de que la solicitud de verificación previa no genera los encabezados necesarios. compruebe que deberá agregar lo siguiente en su archivo .htaccess:

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

También tuve el mismo problema al usar http://www.mocky.io/ lo que hice es agregar en el encabezado de respuesta de mock.io: Access-Control-Allow-Origin *

Para agregarlo solo necesita hacer clic en opciones avanzadas

Ejemplo de encabezado Mock.io Una vez hecho esto, mi aplicación pudo recuperar los datos del dominio externo.

Lamentablemente, no se trata de un error de Angular2, es un error al que se está ejecutando su navegador (es decir, fuera de su aplicación).

Ese encabezado CORS deberá agregarse a ese punto final en el servidor antes de poder realizar CUALQUIER solicitud.

También encontré el mismo problema y pasé de la siguiente manera para resolver este problema.

paso 1:

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

paso 2:

agregar un proxy cuando busco la API web, si usa lite-server, puede agregar un archivo 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' } }) } } }; 

espero que esto ayude.

Simplemente puede establecer en el archivo php como

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

He pasado mucho tiempo buscando soluciones y finalmente funcionó haciendo cambios en el servidor. Consulte el sitio web https://docs.microsoft.com/en-us/aspnet/core/security/cors

Me funcionó cuando habilité Corse en el lado del servidor. Estábamos usando Asp.Net core en API y el siguiente código funcionaba

1) Agregados Addcors en ConfigureServices of Startup.cs

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

2) Se agregó UseCors en el método Configure de la siguiente manera:

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

Otra forma simple, sin instalar nada

  1. Función 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. Crear un archivo proxy.conf.json

     { "/rest": { "target": "http://endpoint.com:8080/package/", "pathRewrite": { "^/rest": "" }, "secure": false } } 
  3. luego ng serve --proxy-config proxy.conf.json (o) abra package.json y reemplace

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

y luego npm start

Eso es.

Consulte aquí https://webpack.github.io/docs/webpack-dev-server.html para ver más opciones

Si está creando una maqueta con SoapUI , una herramienta de prueba gratuita para solicitudes y respuestas REST y SOAP, para la aplicación Angular 2+ debe recordar establecer dentro de su solicitud de encabezado http.

  Access-Control-Allow-Origin : * 

Agrego dos imágenes para ayudar a su inserción. El primero muestra el encabezado que debe agregar. Si desea agregar el encabezado antes de hacer clic en el botón más (es verde).

Primera imagen

La segunda imagen muestra el inserto el *. El valor * permite aceptar todas las solicitudes de diferentes hosts.

Segunda imagen

Después de este trabajo, mi aplicación angular eliminó este molesto error en mi consola.

error dentro de la consola

Un gran recurso que me ayudó a entender para crear mi primera maqueta es este video . Te ayudará a crear una nueva maqueta dentro del entorno de SoapUi sin un servidor.

Obtuve el mismo error y aquí lo resolví agregando lo siguiente a su controlador de spring:

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

Tuve el mismo problema cuando practicaba Angular5. Luego me encontré con https://spring.io/guides/gs/rest-service-cors/ que me ayudó a resolver el problema.

He mantenido @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") en el método de asignación de mi solicitud. También podemos configurar esto globalmente en la aplicación de arranque de spring.