Para este proyecto, solo estoy aprendiendo y practicando Angular 2. No tengo un lado del servidor y estoy haciendo solicitudes de API para barchart ondemand api .
Me pregunto si es posible evitar el problema de cors. Todavía soy bastante nuevo en todo esto, ¡así que las instrucciones paso a paso son realmente apreciadas! Estoy usando http://localhost:8080 .
Mensaje de error: (clave 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.
Servicio de información de existencias:
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()); } }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, la solicitudError de datos: Error: [object Object]
Este es un problema con la configuración de CORS en el servidor. No está claro qué servidor estás usando, pero si estás usando Node+express, puedes 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 se verán afectados, por lo que sus encabezados nunca se establecerán. La razón es que existe lo que se llama una solicitud de verificación previa antes de la solicitud real, que es una solicitud de OPCIONES. Entonces, el error proviene del hecho de que la solicitud de verificación previa no produce los encabezados necesarios. compruebe que deberá agregar lo siguiente en su archivo .htaccess:
Header set Access-Control-Allow-Origin "*"He dedicado mucho tiempo a la solución y finalmente funcionó haciendo cambios en el lado del servidor. Consulte el sitio web https://docs.microsoft.com/en-us/aspnet/core/security/cors
Funcionó para mí cuando habilité corse en el lado del servidor. Estábamos usando el núcleo de Asp.Net en la API y el siguiente código funcionó
1) Addcors agregados en ConfigureServices de Startup.cs
public void ConfigureServices(IServiceCollection services) { services.AddCors(); services.AddMvc(); }2) Se agregaron UseCors en el método Configure de la siguiente manera:
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseCors(builder =>builder.AllowAnyOrigin()); app.UseMvc(); }