javascript - falta - cors angular 6

Angular2: solicitud de origen cruzado bloqueada

Question

Estoy tratando de usar la API de pronóstico con mi aplicación angular2. Sin embargo, cuando intento acceder a la API, aparece un error de origen cruzado. ¿Alguna idea de cómo puedo solucionar este error?

search(latitude: any, longitude: any){
console.log(latitude);
console.log(longitude);
let body = ''https://api.forecast.io/forecast/APIKEY/''+latitude+'',''+longitude ;
console.log(body);
this.http.get(body)
.map(
response => response.json()
).subscribe(
data => console.log("Data: "+data),
err => console.log("Error: "+err),
() => console.log(''Get Complete'')
);
}

Error

Petición cruzada de origen bloqueada: la misma política de origen no permite leer el recurso remoto en https://api.forecast.io/forecast/APIKEY/37.8267,-122.423 . (Motivo: Falta el encabezado CORS ''Acceso-Control-Permitir-Origen'').

Actualizar ahora usando JSONP

 let body = ''https://api.forecast.io/forecast/APIKEY/''+latitude+'',''+longitude + ''?callback=?'' ;
console.log(body);
this.jsonp.get(body)
.map(response => response.json())
.subscribe(
data => console.log("Data: "+data),
err => console.log("Error: "+err),
() => console.log(''Get Complete'')
);

Error

Error0.def29191127bbc3e0100.hot-update.js: 59: 10 Objeto {_body: "La secuencia de comandos inyectada de JSONP no invoca ...", estado: 200, ok: cierto, estadoTexto: "Ok", encabezados: Objeto, tipo: 3, url : " https://api.forecast.io/forecast/60 ..."} 0.def29191127bbc3e0100.hot-update.js: 61: 10 SyntaxError: expresión esperada, got ''===''

Answer 1

Eche un vistazo a las partes de cors en angular.io

https://angular.io/docs/ts/latest/guide/server-communication.html#!#cors

Algo como el de abajo (de arriba)

return this.jsonp
.get(wikiUrl, { search: params })
.map(response => <string[]> response.json()[1]);

Answer 2

Para forecast.io, debe usar JSONP. La forma más fácil de hacerlo usando jQuery es agregar ?callback=? para solicitar URL:

$.getJSON(''https://api.forecast.io/forecast/<API KEY>/'' + latitude + '','' + longitude + "?callback=?", function(data) {
console.log(data);
});

No soy un experto en Angular 2, pero leyendo los documentos parece que necesitas importar el Jsonp y luego agregar una devolución de llamada. Más documentación aquí - vea la sección app/wiki/wikipedia.service.ts .

Creo que algo como el siguiente código te funcionará

let body = "https://api.forecast.io/forecast/<API KEY>/'' + latitude + '','' + longitude + ''?callback=?''";
return this.jsonp
.get(body)
.map(response => <string[]> response.json()[1]);

Answer 3

Obtiene este problema porque el encabezado que está enviando no coincide con los encabezados en el back-end.

Supongamos que envía los siguientes encabezados:

contentHeaders = new Headers();
contentHeaders.append(''Authorization'', ''Your token used in app'');
contentHeaders.append(''Content-Type'', ''application/json'');
contentHeaders.append(''Access-Control-Allow-Origin'', ''*'');

Por lo tanto, los encabezados como Authorization , Content-type y Access-Control-Allow-Origin deben coincidir con los encabezados permitidos en su back-end.

Por lo tanto, en el back Access-Control-Allow-Headers end Access-Control-Allow-Headers debe tener todos los encabezados anteriores:

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Authorization, content-type, Access-Control-Allow-Origin");

De modo que aquí, en Access-Control-Allow-Headers , debe pasar todos los encabezados que envía desde el frontend: ''Autorización'', ''Tipo de contenido'' y ''Control de acceso-Permitir-Origen''.

Funcionará perfectamente cuando uses el concepto anterior.

Espero que esta publicación sea útil para ti

Gracias