Почему добавление заголовков CORS к маршруту OPTIONS не позволяет браузерам получать доступ к моему API?

Я пытаюсь поддерживать CORS в моем приложении Node.js, которое использует веб-инфраструктуру Express.js. Я прочитал обсуждение группы Google о том, как с этим справиться, и прочитал несколько статей о том, как работает CORS. Сначала я сделал это (код написан в синтаксисе 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'
  # ...

Это не похоже на работу. Похоже, мой браузер (Chrome) не отправляет начальный запрос OPTIONS. Когда я только что обновил блок для ресурса, мне нужно отправить перекрестный запрос GET по адресу:

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'
  # ...

Работает (в Chrome). Это также работает в Safari.

Я прочитал это ...

В браузере, реализующем CORS, каждому перекрестному запросу GET или POST предшествует запрос OPTIONS, который проверяет, в порядке ли GET или POST.

Итак, мой главный вопрос: почему этого не происходит в моем случае? Почему не вызывается мой блок app.options? Зачем мне устанавливать заголовки в моем главном блоке app.get?

Чтобы ответить на ваш главный вопрос, спецификация CORS требует, чтобы вызов OPTIONS предшествовал POST или GET, если в POST или GET есть непростой контент или заголовки.

Типы контента, для которых требуется предполетный запрос CORS (вызов OPTIONS), - это любой тип контента, кроме следующих :

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

Любые другие типы контента, кроме перечисленных выше, вызовут предполетный запрос.

Что касается Заголовков, любые Заголовки Запроса кроме следующего вызовут предполетный запрос:

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

Любые другие заголовки запроса активируют предполетный запрос.

Таким образом, вы можете добавить пользовательский заголовок, такой как:, x-Trigger: CORSи он должен вызвать предполетный запрос и попасть в блок OPTIONS.

См. Справочник по MDN Web API - Предварительные запросы CORS.

Я нашел самый простой способ заключается в использовании Node.js пакета CORS . Самое простое использование:

var cors = require('cors')

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

Есть, конечно, много способов настроить поведение в соответствии с вашими потребностями; на странице, указанной выше, приведено несколько примеров.

Попробуйте передать управление следующему подходящему маршруту. Если Express сначала совпадает с маршрутом app.get, он не продолжит движение по маршруту параметров, если вы не сделаете это (обратите внимание на использование next) :

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

    next();
});

Что касается организации CORS, я поместил ее в промежуточное ПО, которое хорошо работает для меня:

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

Чтобы остаться в той же идее маршрутизации. Я использую этот код:

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

Аналогично примеру http://enable-cors.org/server_expressjs.html

делать

npm install cors --save

и просто добавьте эти строки в ваш основной файл, куда направляется ваш запрос (сохраните его перед любым маршрутом).

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

Я сделал более полное промежуточное программное обеспечение, подходящее для экспресс или подключения. Поддерживает OPTIONSзапросы на предполетную проверку. Обратите внимание, что это разрешит CORS доступ ко всему, вы можете поставить некоторые проверки, если хотите ограничить доступ.

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

установить модуль Cors ExpressJS. Вы можете выполнить следующие действия>

Установка

npm install cors

Простое использование (включить все запросы CORS)

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

для получения более подробной информации перейдите на https://github.com/expressjs/cors

Сделайте что-то вроде этого:

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

Тестирование выполнено с экспресс + узел + ионный работает в разных портах.

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

Сначала просто установите Cors в вашем проекте. Возьмите терминал (командную строку) и cdперейдите в каталог вашего проекта и выполните следующую команду:

npm install cors --save

Затем возьмите файл server.js и измените код, добавив в него следующее:

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

Это сработало для меня ..

Это работает для меня, так как это простая реализация внутри маршрутов, я использую Meanjs и его работает нормально, Safari, Chrome и т. Д.

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

    });

Некоторое время назад я столкнулся с этой проблемой, поэтому я сделал это, чтобы включить CORS в моем приложении nodejs:

Сначала вам нужно установить cors с помощью команды ниже:

npm install cors --save

Теперь добавьте следующий код в стартовый файл вашего приложения, например ( 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);

По моему index.jsя добавил:

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

Если вы хотите сделать его специфичным для контроллера, вы можете использовать:

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

Пожалуйста, обратите внимание, что это также позволит использовать iframes.

Можете сослаться на код ниже для того же. Источник: 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
})

Мое простейшее решение с Express 4.2.0 (EDIT: кажется, не работает в 4.3.0) было:

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

Я полагаю, app.all('/result', ...)что работа будет работать тоже ...

Самый простой ответ - просто использовать пакет cors .

const cors = require('cors');

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

Это позволит CORS по всем направлениям. Если вы хотите узнать, как включить CORS без внешних модулей , все, что вам действительно нужно, это некоторое промежуточное программное обеспечение Express, которое устанавливает заголовок «Access-Control-Allow-Origin» . Это минимум, который вам нужен, чтобы разрешить кросс-запросы доменов из браузера на ваш сервер.

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

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

Использование Express Middleware прекрасно работает для меня. Если вы уже используете Express, просто добавьте следующие правила промежуточного программного обеспечения. Это должно начать работать.

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

Ссылка

Ниже работал для меня, надеюсь, это поможет кому-то!

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

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

Получил ссылку с https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Я обнаружил, что это очень легко сделать с помощью пакета запросов npm ( https://www.npmjs.com/package/request )

Тогда я основал свое решение на этом посте 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'));
});

В машинописи, если вы хотите использовать 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;

Если вы не хотите использовать библиотеки третьей части для обработки ошибок cors, вам нужно изменить метод 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;

Для использования файла 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);

Это похоже на ответ Пата с той разницей, что я заканчиваю с res.sendStatus (200); вместо следующего ();

Код будет перехватывать все запросы типа метода OPTIONS и отправлять обратно заголовки контроля доступа.

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

Код принимает CORS из всех источников в соответствии с запросом в вопросе. Однако было бы лучше заменить * на конкретное происхождение, то есть http: // localhost: 8080, чтобы предотвратить неправильное использование.

Поскольку мы используем метод app.options вместо метода app.use, нам не нужно выполнять эту проверку:

req.method === 'OPTIONS'

который мы можем увидеть в некоторых других ответах.

Я нашел ответ здесь: http://johnzhang.io/options-request-in-express .

Вы можете использовать промежуточное программное обеспечение Express, заблокировать домен и методы.

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

Мы можем избежать CORS и перенаправить запросы на другой сервер:

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

Я использовал следующие шаги для моего веб-приложения, и у меня был успех:

Добавьте пакет Cors в экспресс:

npm install cors --save

Добавьте следующие строки после конфигурации bodyParser . У меня были некоторые проблемы с добавлением до 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.

Самый простой подход - установить модуль Cors в ваш проект, используя:

npm i --save cors

Затем в файл вашего сервера импортируйте его, используя следующее:

import cors from 'cors';

Затем просто используйте его в качестве промежуточного ПО, например:

app.use(cors());

Надеюсь это поможет!

Если бы я был тобой @OP, я бы изменил свою парадигму программирования.

при условии, что вы блокируете эти CORS, потому что вы делаете запросы к localhost или что-то подобное.

В конце концов, если вы собираетесь развернуть в производственных оптоинах, таких как Google Cloud Platformили Herokuили, вам не нужно будет беспокоиться о CORS, например, разрешить отправку или что- то еще, когда вы находитесь в производстве.

поэтому при тестировании сервера просто используйте, postmanи вы не заблокируете CORS, после этого разверните свой сервер и затем работайте на своем клиенте.

/ * во-первых, и это может быть проблемой среди младших разработчиков, таких как я: убедитесь, что вы используете "lambda" >>>> "` ", а не" '"в вашей выборке методе ! * /

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

/ plus, настоятельно рекомендуется следующая статья: https://developer.edamam.com/api/faq /

просто тяжело

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

Попробуйте это в вашем основном файле js:

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

Это должно решить вашу проблему