javascript - falta - Error de CORS: campo de encabezado de solicitud La autorización no está permitida por Access-Control-Allow-Headers en la respuesta previa

enable cors

Question

Estoy intentando enviar la solicitud de un puerto localhost al otro. Estoy usando angularjs en el frontend y nodo en el backend .

Ya que es una solicitud CORS , en node.js, estoy usando

res.header(''Access-Control-Allow-Origin'', ''*'');
res.header(''Access-Control-Allow-Methods'', ''GET, POST, PUT, DELETE, PATCH'');
res.header(''Access-Control-Allow-Headers'', ''Origin, X-Requested-With, Content-Type, Accept, Authorization'');

y en el archivo de servicio angular.js, estoy usando

return {
    getValues: $resource(endpoint + ''/admin/getvalues'', null, {
        ''get'': {
             method: ''GET'',
             headers:{''Authorization'':''Bearer''+'' ''+ $localStorage.token}
             }
     }),
}

Estoy teniendo el siguiente error

Campo de encabezado de solicitud La autorización no está permitida por Access-Control-Allow-Headers en la respuesta de verificación previa.

¡Por favor ayuda!

Answer 1

Este es un problema de API, no obtendrá este error si utiliza Postman / Fielder para enviar solicitudes HTTP a API. En el caso de los navegadores, por razones de seguridad, siempre envían OPTIONS request / preflight a API antes de enviar las solicitudes reales (GET / POST / PUT / DELETE). Por lo tanto, en caso de que el método de solicitud sea OPCIÓN, no solo necesita agregar "Autorización" a "Access-Control-Allow-Headers", sino que necesita agregar "OPTIONS" a "Access-Control-allow-methods" como bien. Así fue como lo arreglé:

if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
            context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" });
            context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
            context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });

        }

Answer 2

Primero necesitas instalar cors usando el siguiente comando:

npm install cors --save

Ahora agregue el siguiente código a su archivo de inicio de aplicación como ( app.js or server.js )

var express = require(''express'');
var app = express();

var cors = require(''cors'');
var bodyParser = require(''body-parser'');

//enables cors
app.use(cors({
  ''allowedHeaders'': [''sessionId'', ''Content-Type''],
  ''exposedHeaders'': [''sessionId''],
  ''origin'': ''*'',
  ''methods'': ''GET,HEAD,PUT,PATCH,POST,DELETE'',
  ''preflightContinue'': false
}));

require(''./router/index'')(app);

Answer 3

Si no desea instalar la biblioteca de cors y en su lugar desea corregir su código original, el otro paso que le falta es que Access-Control-Allow-Origin: * es incorrecto. Al pasar tokens de autenticación (por ejemplo, JWT), debe indicar explícitamente cada url que está llamando a su servidor. No puedes usar "*" cuando haces tokens de autenticación.

Answer 4

The res.header(''Access-Control-Allow-Origin'', ''*''); no funcionaría con el encabezado de Autorización. Solo habilite la solicitud previa al vuelo, usando la npmjs.com/package/cors :

var express = require(''express'')
var cors = require(''cors'');
var app = express()
app.options(''*'', cors())

Answer 5

Tienes que agregar opciones también en los encabezados permitidos. El navegador envía una solicitud de verificación previa antes de enviar la solicitud original. Vea abajo

 res.header(''Access-Control-Allow-Methods'', ''GET,PUT,POST,DELETE,PATCH,OPTIONS'');

De la fuente https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

En CORS, se envía una solicitud de verificación previa con el método OPCIONES, para que el servidor pueda responder si es aceptable enviar la solicitud con estos parámetros. El encabezado Access-Control-Request-Method notifica al servidor como parte de una solicitud de verificación previa de que cuando se envía la solicitud real, se enviará con un método de solicitud POST. El Access-Control-Request-Headers notifica al servidor que cuando se envíe la solicitud real, se enviará con un encabezado personalizado X-PINGOTHER y Content-Type . El servidor ahora tiene la oportunidad de determinar si desea aceptar una solicitud en estas circunstancias.

Editado

Puede evitar esta configuración manual utilizando npmjs.com/package/cors npm npmjs.com/package/cors También he usado este método, es claro y fácil.