javascript - headers - Angular $ http está enviando OPCIONES en lugar de PUT/POST
http post angular 5 (2)
No necesita especificar sus encabezados
$http
manualmente, todo se hace por usted detrás de escena y se configuran automáticamente en
application/json
para
POST
tipo
POST
y
PUT
.
Entonces todo lo que debes hacer es
$http.post(url, data);
$http.put(url, data);
Estoy tratando de actualizar / insertar datos en una base de datos MySQL a través de un servidor PHP.
Estoy construyendo el Front End con AngularJS y usando el servicio
$http
para comunicarme con la API REST.
Mi configuración se ve así:
Estoy configurando el encabezado a través del $ httpProvider:
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers = {''Content-Type'': ''application/json;charset=utf-8''};
Y la POST-Call se ve así:
return $http({
url: url,
method: "POST",
data: campaign
});
La consola de desarrollo en Chrome me muestra esto:
Cuando cambio de POST a PUT, estoy enviando una llamada de OPTIONS en lugar de un PUT.
Y el tipo de contenido cambia solo a
content-type
.
Mi carga útil de solicitud se envía como un objeto:
¿Cómo configuro mi encabezado correctamente?
EDITAR:
El backend de PHP establece algunos encabezados:
$e->getResponse()
->getHeaders()
->addHeaderLine(''Access-Control-Allow-Methods'', ''GET, POST, PUT, DELETE, OPTIONS'');
$e->getResponse()
->getHeaders()
->addHeaderLine(''Access-Control-Allow-Origin'', ''*'');
¿Hay algo que falta?
Ok, ya lo solucioné.
¿Cual fue el problema?
El flujo de trabajo de CORS para DELETE, PUT y POST es el siguiente:
Lo que hace es:
- Verificando qué solicitud se hará
- Si es POST, PUT o DELETE
- Primero envía una solicitud de OPCIÓN para verificar si el dominio, desde el cual se envía la solicitud, es el mismo que el del servidor.
- De lo contrario , quiere que un encabezado de acceso pueda enviar esta solicitud
Importante aquí: una solicitud de OPCIONES no envía credenciales .
Entonces, mi servidor backend rechazó la solicitud PUT.
Solución:
Poniendo esto dentro del archivo
.htaccess
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ blank.php [QSA,L]
Header set Access-Control-Allow-Origin "http://sub.domain:3000"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Después de esto, cree un archivo .php vacío llamado blank.php dentro de la carpeta pública.
EDITAR: Como señaló un comentarista, en lugar de crear un archivo PHP vacío, puede agregar esta regla de reescritura a su archivo .htaccess /;
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
Para aclarar:
- Ya envié el encabezado de control de acceso
- Lo que resolvió fueron las dos primeras líneas, y
- Access-Control-Allow-Origin desde el subdominio específico con Puerto
El mejor sitio web que pude encontrar para aprender más sobre CORS .