¿Por qué agregar encabezados CORS a una ruta OPTIONS no permite que los navegadores accedan a mi API?

Estoy tratando de admitir CORS en mi aplicación Node.js que usa el marco web Express.js. Leí una discusión grupal de Google sobre cómo manejar esto, y leí algunos artículos sobre cómo funciona CORS. Primero, hice esto (el código está escrito en sintaxis CoffeeScript):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

No parece funcionar. Parece que mi navegador (Chrome) no está enviando la solicitud de OPCIONES inicial. Cuando acabo de actualizar el bloque para el recurso, necesito enviar una solicitud GET de origen cruzado a:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

Funciona (en Chrome). Esto también funciona en Safari.

He leído que ...

En un navegador que implementa CORS, cada solicitud GET o POST de origen cruzado está precedida por una solicitud OPTIONS que verifica si GET o POST está OK.

Entonces mi pregunta principal es, ¿cómo es que esto no parece suceder en mi caso? ¿Por qué no se llama a mi bloque app.options? ¿Por qué necesito configurar los encabezados en mi bloque app.get principal?

Para responder a su pregunta principal, la especificación CORS solo requiere que la llamada OPTIONS preceda a POST o GET si POST o GET tiene contenido o encabezados no simples.

Los tipos de contenido que requieren una solicitud previa al vuelo de CORS (la llamada OPTIONS) son cualquier tipo de contenido, excepto los siguientes :

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

Cualquier otro tipo de contenido aparte de los enumerados anteriormente activará una solicitud previa al vuelo.

En cuanto a los encabezados, cualquier encabezado de solicitud que no sea el siguiente activará una solicitud previa al vuelo:

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type
5. DPR
6. Save-Data
7. Viewport-Width
8. Width

Cualquier otro encabezado de solicitud activará la solicitud previa al vuelo.

Por lo tanto, puede agregar un encabezado personalizado como:, x-Trigger: CORSy eso debería activar la solicitud previa al vuelo y presionar el bloque OPTIONS.

Consulte la referencia de la API web de MDN: solicitudes con verificación previa de CORS

Encontré que la forma más fácil es usar el paquete node.js cors . El uso más simple es:

var cors = require('cors')

var app = express()
app.use(cors())

Por supuesto, hay muchas formas de configurar el comportamiento según sus necesidades; La página vinculada anteriormente muestra una serie de ejemplos.

Intente pasar el control a la siguiente ruta coincidente. Si Express coincide primero con la ruta app.get, entonces no continuará en la ruta de opciones a menos que haga esto (tenga en cuenta el uso de next) :

app.get('somethingelse', function(req, res, next) {
    //..set headers etc.

    next();
});

En términos de organizar las cosas CORS, lo puse en un middleware que funciona bien para mí:

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

Para mantenerse en la misma idea de enrutamiento. Yo uso este código:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

Similar al ejemplo de http://enable-cors.org/server_expressjs.html

hacer

npm install cors --save

y simplemente agregue estas líneas en su archivo principal donde va su solicitud (consérvela antes de cualquier ruta).

const cors = require('cors');
const express = require('express');
let app = express();
app.use(cors());
app.options('*', cors());

He hecho un middleware más completo adecuado para express o connect. Admite OPTIONSsolicitudes de verificación previa al vuelo. Tenga en cuenta que permitirá el acceso de CORS a cualquier cosa, es posible que desee realizar algunas verificaciones si desea limitar el acceso.

app.use(function(req, res, next) {
    var oneof = false;
    if(req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        oneof = true;
    }
    if(req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
        oneof = true;
    }
    if(req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
        oneof = true;
    }
    if(oneof) {
        res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
    }

    // intercept OPTIONS method
    if (oneof && req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});

instale el módulo cors de expressjs. puedes seguir estos pasos>

Instalación

npm install cors

Uso simple (Habilitar todas las solicitudes CORS)

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

Para obtener más detalles, visite https://github.com/expressjs/cors

Haz algo como esto:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Pruebas realizadas con express + node + ionic corriendo en diferentes puertos.

Localhost:8100

Localhost:5000

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests

app.all('*', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "X-Requested-With");
       res.header('Access-Control-Allow-Headers', 'Content-Type');
       next();
});

primero simplemente instale cors en su proyecto. Tome la terminal (símbolo del sistema) y cdel directorio de su proyecto y ejecute el siguiente comando:

npm install cors --save

Luego tome el archivo server.js y cambie el código para agregar lo siguiente:

var cors = require('cors');


var app = express();

app.use(cors());

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

Esto funcionó para mí ...

Esto funciona para mí, ya que es una implementación fácil dentro de las rutas, estoy usando meanjs y funciona bien, safari, cromo, etc.

app.route('/footer-contact-form').post(emailer.sendFooterMail).options(function(req,res,next){ 
        res.header('Access-Control-Allow-Origin', '*'); 
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        return res.send(200);

    });

Hace algún tiempo, me enfrenté a este problema, así que hice esto para permitir CORS en mi aplicación nodejs:

Primero necesitas instalar cors usando el siguiente comando:

npm install cors --save

Ahora agregue el siguiente código al archivo de inicio de su 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);

En mi index.jsagregué:

app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
   next();
}) 

Si desea que sea específico para el controlador, puede usar:

res.setHeader('X-Frame-Options', 'ALLOWALL');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

Tenga en cuenta que esto también permitirá iframes.

Puede referir el siguiente código para lo mismo. Fuente: Academind / node-restful-api

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

//acts as a middleware
//to handle CORS Errors
app.use((req, res, next) => { //doesn't send response just adjusts it
    res.header("Access-Control-Allow-Origin", "*") //* to give access to any origin
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization" //to give access to all the headers provided
    );
    if(req.method === 'OPTIONS'){
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); //to give access to all the methods provided
        return res.status(200).json({});
    }
    next(); //so that other routes can take over
})

Mi solución más simple con Express 4.2.0 (EDITAR: no parece funcionar en 4.3.0) fue:

function supportCrossOriginScript(req, res, next) {
    res.status(200);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");

    // res.header("Access-Control-Allow-Headers", "Origin");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // res.header("Access-Control-Allow-Methods","POST, OPTIONS");
    // res.header("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT, HEAD");
    // res.header("Access-Control-Max-Age","1728000");
    next();
}

// Support CORS
app.options('/result', supportCrossOriginScript);

app.post('/result', supportCrossOriginScript, function(req, res) {
    res.send('received');
    // do stuff with req
});

Supongo que hacer app.all('/result', ...)funcionaría también ...

La respuesta más fácil es usar el paquete cors .

const cors = require('cors');

const app = require('express')();
app.use(cors());

Eso habilitará CORS en todos los ámbitos. Si desea aprender cómo habilitar CORS sin módulos externos , todo lo que realmente necesita es un middleware Express que establezca el encabezado 'Access-Control-Allow-Origin' . Eso es lo mínimo que necesita para permitir dominios de solicitud cruzada desde un navegador a su servidor.

app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('ok');
});

app.use((req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
});

Usar Express Middleware funciona muy bien para mí. Si ya está utilizando Express, simplemente agregue las siguientes reglas de middleware. Debería comenzar a funcionar.

app.all("/api/*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

app.all("/api/*", function(req, res, next) {
  if (req.method.toLowerCase() !== "options") {
    return next();
  }
  return res.send(204);
});

Referencia

A continuación funcionó para mí, ¡espero que ayude a alguien!

const express = require('express');
const cors = require('cors');
let app = express();

app.use(cors({ origin: true }));

Obtuve referencia de https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Me pareció extremadamente fácil hacer esto con el paquete de solicitud npm ( https://www.npmjs.com/package/request )

Luego basé mi solución en esta publicación http://blog.javascripting.com/2015/01/17/dont-hassle-with-cors/

'use strict'

const express = require('express');
const request = require('request');

let proxyConfig = {
    url : {
        base: 'http://servertoreach.com?id=',
    }
}

/* setting up and configuring node express server for the application */
let server = express();
server.set('port', 3000);


/* methods forwarded to the servertoreach proxy  */
server.use('/somethingElse', function(req, res)
{
    let url = proxyConfig.url.base + req.query.id;
    req.pipe(request(url)).pipe(res);
});


/* start the server */
server.listen(server.get('port'), function() {
    console.log('express server with a proxy listening on port ' + server.get('port'));
});

En mecanografiado, si desea utilizar el paquete node.js cors

/**
* app.ts
* If you use the cors library
*/

import * as express from "express";
[...]
import * as cors from 'cors';

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       const corsOptions: cors.CorsOptions = {
           origin: 'http://example.com',
           optionsSuccessStatus: 200
       };
       this.express.use(cors(corsOptions));
   }
}

export default new App().express;

Si no desea utilizar bibliotecas de terceros para el manejo de errores de cors, debe cambiar el método handleCORSErrors ().

/**
* app.ts
* If you do not use the cors library
*/

import * as express from "express";
[...]

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       this.express.use((req, res, next) => {
           res.header("Access-Control-Allow-Origin", "*");
           res.header(
               "Access-Control-ALlow-Headers",
               "Origin, X-Requested-With, Content-Type, Accept, Authorization"
           );
           if (req.method === "OPTIONS") {
               res.header(
                   "Access-Control-Allow-Methods",
                   "PUT, POST, PATCH, GET, DELETE"
               );
               return res.status(200).json({});
           } 
           next(); // send the request to the next middleware
       });
    }
}

export default new App().express;

Para usar el archivo app.ts

/**
* server.ts
*/
import * as http from "http";
import app from "./app";

const server: http.Server = http.createServer(app);

const PORT: any = process.env.PORT || 3000;
server.listen(PORT);

Esto es similar a la respuesta de Pat con la diferencia que termino con res.sendStatus (200); en lugar de next ();

El código capturará todas las solicitudes del tipo de método OPTIONS y devolverá los encabezados de control de acceso.

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

El código acepta CORS de todos los orígenes según lo solicitado en la pregunta. Sin embargo, sería mejor reemplazar el * con un origen específico, es decir, http: // localhost: 8080 para evitar el mal uso.

Como usamos el método app.options en lugar del método app.use, no necesitamos hacer esta comprobación:

req.method === 'OPTIONS'

que podemos ver en algunas de las otras respuestas.

Encontré la respuesta aquí: http://johnzhang.io/options-request-in-express .

Puede usar el middleware Express, bloquear su dominio y métodos.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", process.env.DOMAIN); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

Podemos evitar CORS y reenviar las solicitudes al otro servidor:

// config:
var public_folder = __dirname + '/public'
var apiServerHost = 'http://other.server'

// code:
console.log("starting server...");

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

// serve static files
app.use(express.static(public_folder));

// if not found, serve from another server
app.use(function(req, res) {
    var url = apiServerHost + req.url;
    req.pipe(request(url)).pipe(res);
});

app.listen(80, function(){
    console.log("server ready");
});

Utilicé los siguientes pasos para mi aplicación web y tuve éxito:

Agregue el paquete cors al expreso:

npm install cors --save

Agregue las siguientes líneas después de la configuración de bodyParser . Tuve algunos problemas para agregar antes de bodyParser:

 // enable cors to the server
const corsOpt = {
    origin: process.env.CORS_ALLOW_ORIGIN || '*', // this work well to configure origin url in the server
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'], // to works well with web app, OPTIONS is required
    allowedHeaders: ['Content-Type', 'Authorization'] // allow json and token in the headers
};
app.use(cors(corsOpt)); // cors for all the routes of the application
app.options('*', cors(corsOpt)); // automatic cors gen for HTTP verbs in all routes, This can be redundant but I kept to be sure that will always work.

El enfoque más simple es instalar el módulo cors en su proyecto usando:

npm i --save cors

Luego, en el archivo del servidor, impórtelo utilizando lo siguiente:

import cors from 'cors';

Luego, simplemente utilícelo como un middleware como este:

app.use(cors());

¡Espero que esto ayude!

Si fuera usted @OP, cambiaría mi paradigma de programación.

asumiendo que está bloqueando estos CORS porque está haciendo solicitudes a localhost o algo similar.

Eventualmente, si va a implementar optoins de producción como Google Cloud Platformor Herokuo, no tendrá que preocuparse por CORS como permitir origen o lo que sea cuando esté en producción.

así que cuando pruebe el servidor simplemente use postmany no se bloqueará CORS, luego implemente su servidor y luego trabaje en su cliente.

/ * en primer lugar, y este podría ser el problema entre los desarrolladores junior, como yo: ¡asegúrese de usar "lambda" >>>> "` "y no" '"en su método de búsqueda ! * /

`` `respuesta const = await fetch ( https://api....);

/ plus, el siguiente artículo es muy recomendable: https://developer.edamam.com/api/faq /

lo simple es difícil:

 let my_data = []
const promise = new Promise(async function (resolve, reject) {
    axios.post('https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/directions/json?origin=33.69057660000001,72.9782724&destination=33.691478,%2072.978594&key=AIzaSyApzbs5QDJOnEObdSBN_Cmln5ZWxx323vA'
        , { 'Origin': 'https://localhost:3000' })
        .then(function (response) {
            console.log(`axios response ${response.data}`)
            const my_data = response.data
            resolve(my_data)
        })
        .catch(function (error) {
            console.log(error)
            alert('connection error')
        })
})
promise.then(data => {
    console.log(JSON.stringify(data))
})

Pruebe esto en su archivo js principal:

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
  "Access-Control-Allow-Headers",
  "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
);
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
next();
});

Esto debería solucionar tu problema