navigationend - title angular 6
Cómo agregar una solicitud CORS en el encabezado en Angular 5 (6)
He agregado el CORS en el encabezado, pero todavía recibo el problema CORS en mi solicitud. ¿Cuál es la forma correcta de agregar y manejar CORS y otras solicitudes en los encabezados?
Aquí está el código del archivo de servicio:
import { HttpClient, HttpHeaders, HttpClientModule } from ''@angular/common/http'';
const httpOptions = {
headers: new HttpHeaders({
''Access-Control-Allow-Origin'':''*'',
''Authorization'':''authkey'',
''userid'':''1''
})
};
public baseurl = ''http://localhost/XXXXXX'';
userAPI(data): Observable<any> {
return this.http.post(this.baseurl, data, httpOptions)
.pipe(
tap((result) => console.log(''result-->'',result)),
catchError(this.handleError(''error'', []))
);
}
Error:
La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Origen '' http: // localhost: 4200 '' por lo tanto no se permite el acceso
Error: respuesta de error de HTTP para (URL desconocida): 0 Error desconocido
En mi código del lado del servidor, he agregado CORS en el archivo de índice.
header(''Access-Control-Allow-Origin: *'');
header(''Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS'');
header(''Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'');
CORS (Intercambio de recursos de origen cruzado) es una manera para que el servidor diga "Aceptaré su solicitud, aunque venga de un origen diferente". Esto requiere la cooperación del servidor; por lo tanto, si no puede modificar el servidor (por ejemplo, si está utilizando una API externa), este enfoque no funcionará.
Modifique el servidor para agregar el encabezado Access-Control-Allow-Origin: * para habilitar las solicitudes de origen cruzado desde cualquier lugar (o especificar un dominio en lugar de *).
En mi experiencia, los complementos trabajaron con HTTP pero no con el último cliente de http. Además, configurar las cabeceras de respuesta CORS en el servidor no era realmente una opción. Entonces, creé un archivo proxy.conf.json para actuar como un servidor proxy.
Lea más sobre esto here .
archivo proxy.conf.json :
{
"/posts": {
"target": "https://example.com",
"secure": true,
"pathRewrite": {
"^/posts": ""
},
"changeOrigin": true
}
}
proxy.conf.json archivo proxy.conf.json justo al lado del archivo package.json en el mismo directorio.
Luego modifiqué el comando de inicio en el archivo package.json:
"start": "ng serve --proxy-config proxy.conf.json"
La llamada HTTP de mi componente de aplicación:
return this._http.get(''/posts/pictures?method=GetPictures'')
.subscribe((returnedStuff) => {
console.log(returnedStuff);
});
Por último, para ejecutar mi aplicación, tendría que usar npm start o ng serve --proxy-config proxy.conf.json
Haga que el encabezado tenga este aspecto para HttpClient en NG5:
let httpOptions = {
headers: new HttpHeaders({
''Content-Type'': ''application/json'',
''apikey'': this.apikey,
''appkey'': this.appkey,
}),
params: new HttpParams().set(''program_id'', this.program_id)
};
Podrás hacer llamadas a tu API con tu URL de localhost, funciona para mí.
- Por favor, nunca olvides tus params columnd en el encabezado: como params: new HttpParams (). Set (''program_id'', this.program_id)
Por favor, importe requestoptions desde cors angular
import {RequestOptions, Request, Headers } from ''@angular/http'';
y agregue opciones de solicitud en su código como se indica a continuación
let requestOptions = new RequestOptions({ headers:null, withCredentials:
true });
Opción de enviar solicitud en su solicitud de API
código de código a continuación-
let requestOptions = new RequestOptions({ headers:null,
withCredentials: true });
return this.http.get(this.config.baseUrl +
this.config.getDropDownListForProject, requestOptions)
.map(res =>
{
if(res != null)
{
return res.json();
//return true;
}
})
.catch(this.handleError);
}
y agregue CORS en su código PHP de backend donde todas las solicitudes de API aparecerán primero.
intente esto y hágame saber si está funcionando o no, tuve el mismo problema. Estaba agregando CORS de angular5 que no estaba funcionando, luego agregué CORS al backend y funcionó para mí.
Un POST con httpClient en Angular 6 también estaba haciendo una solicitud de OPCIONES:
Cabeceras generales:
Request URL:https://hp-probook/perl-bin/muziek.pl/=/postData Request Method:OPTIONS Status Code:200 OK Remote Address:127.0.0.1:443 Referrer Policy:no-referrer-when-downgrade
Mi servidor REST de Perl implementa la solicitud de OPCIONES con el código de retorno 200.
El siguiente encabezado de solicitud POST:
Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Connection:keep-alive Host:hp-probook Origin:http://localhost:4200 Referer:http://localhost:4200/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36
Aviso de acceso-control-solicitud-encabezados: tipo de contenido.
Por lo tanto, mi secuencia de comandos perl backend utiliza los siguientes encabezados:
-"Access-Control-Allow-Origin" => ''*'', -"Access-Control-Allow-Methods" => ''GET,POST,PATCH,DELETE,PUT,OPTIONS'', -"Access-Control-Allow-Headers" => ''Origin, Content-Type, X-Auth-Token, content-type'',
¡Con esta configuración, GET y POST trabajaron para mí!
prueba este plugin "Allow-Control-Allow-Origin: *"