Por que a adição de cabeçalhos CORS a uma rota OPTIONS permite que os navegadores acessem minha API?

Estou tentando oferecer suporte ao CORS no meu aplicativo Node.js. que usa a estrutura da web Express.js. Li uma discussão em grupo do Google sobre como lidar com isso e li alguns artigos sobre como o CORS funciona. Primeiro, fiz isso (o código está escrito na sintaxe do 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'
  # ...

Não parece funcionar. Parece que meu navegador (Chrome) não está enviando a solicitação OPTIONS inicial. Quando acabei de atualizar o bloco para o recurso, preciso enviar uma solicitação GET de origem cruzada para:

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 (no Chrome). Isso também funciona no Safari.

Eu li isso ...

Em um navegador que implementa o CORS, cada solicitação GET ou POST de origem cruzada é precedida por uma solicitação OPTIONS que verifica se GET ou POST está OK.

Então, minha pergunta principal é: como isso parece não acontecer no meu caso? Por que meu bloco app.options não é chamado? Por que preciso definir os cabeçalhos no meu bloco principal app.get?

Para responder à sua pergunta principal, a especificação CORS exige apenas que a chamada OPTIONS preceda o POST ou GET se o POST ou GET tiver conteúdo ou cabeçalhos não simples.

Os tipos de conteúdo que exigem uma solicitação de pré-vôo do CORS (a chamada OPTIONS) são qualquer tipo de conteúdo, exceto o seguinte :

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

Quaisquer outros tipos de conteúdo, além dos listados acima, acionarão uma solicitação antes do voo.

Quanto aos cabeçalhos, todos os cabeçalhos de solicitação, exceto os seguintes , acionarão uma solicitação antes do voo:

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

Quaisquer outros cabeçalhos de solicitação acionarão a solicitação antes do voo.

Portanto, você pode adicionar um cabeçalho personalizado, como:, x-Trigger: CORSe que deve disparar a solicitação antes do voo e pressionar o bloco OPTIONS.

Consulte Referência da API da Web MDN - Solicitações verificadas do CORS

Eu encontrei a maneira mais fácil é usar o pacote Node.js coros . O uso mais simples é:

var cors = require('cors')

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

Existem, é claro, muitas maneiras de configurar o comportamento de acordo com suas necessidades; a página vinculada acima mostra vários exemplos.

Tente passar o controle para a próxima rota correspondente. Se o Express corresponder à rota app.get primeiro, ele não continuará na rota de opções, a menos que você faça isso (observe o uso da próxima) :

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

    next();
});

Em termos de organização do material do CORS, coloquei-o em um middleware que está funcionando bem para mim:

//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 permanecer na mesma idéia de roteamento. Eu 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();
});

Semelhante ao http://enable-cors.org/server_expressjs.html exemplo

Faz

npm install cors --save

e basta adicionar essas linhas no arquivo principal para onde a solicitação está indo (mantenha-a antes de qualquer rota).

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

Eu criei um middleware mais completo, adequado para expressar ou conectar. Ele suporta OPTIONSsolicitações para verificação de comprovação. Observe que isso permitirá que o CORS acesse qualquer coisa. Você pode fazer algumas verificações se quiser limitar o acesso.

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 o módulo cors do expressjs. você pode seguir estas etapas>

Instalação

npm install cors

Uso simples (ativar todas as solicitações do CORS)

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

para obter mais detalhes, acesse https://github.com/expressjs/cors

Faça algo parecido com isto:

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();
});

Testes realizados com express + node + ionic rodando em portas diferentes.

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();
});

primeiro basta instalar cors no seu projeto. Leve o terminal (prompt de comando) cdpara o diretório do projeto e execute o comando abaixo:

npm install cors --save

Em seguida, pegue o arquivo server.js e altere o código para adicionar o seguinte:

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();
});

Isso funcionou para mim ..

Isso funciona para mim, pois é uma implementação fácil dentro das rotas, estou usando meanjs e está funcionando bem, safari, chrome, 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);

    });

Há algum tempo, eu enfrentei esse problema, então fiz isso para permitir o CORS no meu aplicativo nodejs:

Primeiro você precisa instalar cors usando o comando abaixo:

npm install cors --save

Agora adicione o seguinte código ao arquivo inicial do aplicativo, 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);

No meu index.jseu adicionei:

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();
}) 

Se você deseja torná-lo específico do controlador, pode 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');

Observe que isso também permitirá iframes.

Pode consultar o código abaixo para o mesmo. Fonte: 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
})

Minha solução mais simples com o Express 4.2.0 (EDIT: parece não funcionar no 4.3.0) foi:

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
});

Suponho que fazer app.all('/result', ...)funcionaria também ...

A resposta mais fácil é usar apenas o pacote cors .

const cors = require('cors');

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

Isso permitirá o CORS de maneira geral. Se você deseja aprender como habilitar o CORS sem módulos externos , tudo o que você realmente precisa é de um middleware Express que defina o cabeçalho 'Access-Control-Allow-Origin' . Esse é o mínimo necessário para permitir domínios de solicitação cruzada de um navegador para o 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 o Express Middleware funciona muito bem para mim. Se você já estiver usando o Express, basta adicionar as seguintes regras de middleware. Deve começar 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);
});

Referência

Abaixo funcionou para mim, espero que ajude alguém!

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

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

Obtenha referência em https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Achei extremamente fácil fazer isso com o pacote de solicitação npm ( https://www.npmjs.com/package/request )

Em seguida, baseiei minha solução neste post 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'));
});

À máquina, se você quiser usar o Node.js pacote coros

/**
* 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;

Se você não quiser usar bibliotecas de terceiros para o tratamento de erros de cors, precisará alterar o 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 o arquivo 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);

Isso é semelhante à resposta de Pat com a diferença que eu termino com res.sendStatus (200); em vez de next ();

O código captura todas as solicitações do tipo de método OPTIONS e envia de volta os cabeçalhos de controle de acesso.

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);
});

O código aceita o CORS de todas as origens, conforme solicitado na pergunta. No entanto, seria melhor substituir o * por uma origem específica, por exemplo, http: // localhost: 8080 para evitar o uso indevido.

Como usamos o método app.options em vez do método app.use, não precisamos fazer esta verificação:

req.method === 'OPTIONS'

o que podemos ver em algumas das outras respostas.

Encontrei a resposta aqui: http://johnzhang.io/options-request-in-express .

Você pode usar o middleware Express, bloquear seu domínio e 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 o CORS e encaminhar as solicitações para o outro 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");
});

Usei as seguintes etapas para meu aplicativo da web e tive sucesso:

Adicione o pacote cors ao expresso:

npm install cors --save

Adicione as seguintes linhas após a configuração do bodyParser . Eu tive alguns problemas para adicionar antes do 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.

A abordagem mais simples é instalar o módulo cors no seu projeto usando:

npm i --save cors

Em seguida, no arquivo do servidor, importe-o usando o seguinte:

import cors from 'cors';

Em seguida, basta usá-lo como um middleware como este:

app.use(cors());

Espero que isto ajude!

Se eu fosse você @OP, mudaria meu paradigma de programação.

supondo que você esteja bloqueando esses CORS porque você está solicitando localhost ou algo semelhante.

Eventualmente, se você for implantar em optoins de produção como Google Cloud Platformou Herokuou, não precisará se preocupar com o CORS como permitir a origem ou o que quer que esteja durante a produção.

portanto, ao testar o servidor, basta usar postmane você não bloqueará o CORS; depois disso, implante o servidor e trabalhe no cliente.

/ * antes de tudo, e este pode ser o problema entre os desenvolvedores juniores, como eu: certifique-se de usar "lambda" >>>> "` `" e não "'" em sua busca método de ! * /

`` `const response = aguarde fetch ( https://api....);

/ plus, o seguinte artigo é altamente recomendado: https://developer.edamam.com/api/faq /

simples é 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))
})

Tente isso no seu arquivo 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();
});

Isso deve resolver seu problema