Чому додавання заголовків 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.

Див. Довідку веб-API MDN - попередньо просвічені запити CORS

Я знайшов найпростіший спосіб полягає у використанні Node.js пакета CORS . Найпростіше використання:

var cors = require('cors')

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

Звичайно, існує багато способів налаштувати поведінку під ваші потреби; на сторінці, що пов'язана вище, наведено ряд прикладів.

Спробуйте передати контроль наступному маршруту. Якщо Express спочатку відповідає маршруту app.get, він не продовжуватиметься на маршруті варіантів, якщо ви цього не зробите (зверніть увагу на використання наступного) :

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

спочатку просто встановіть у свій проект корти. Візьміть термінал (командний рядок) і 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 та його чудові роботи, сафарі, хром тощо.

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

Зверніть увагу, що це також дозволить рамки кадрів.

Можна вказати код нижче для того ж. Джерело: 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', ...)що робота теж спрацює ...

Найпростіша відповідь - просто використовувати пакет корсів .

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

Якщо ви хочете використовувати nors.js пакетів cors , ви можете використовувати в typecript

/**
* 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); замість next ();

Код буде охоплювати всі запити методу типу 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, після цього розгорніть ваш сервер, а потім працюйте на своєму клієнті.

/ * Перш за все, і це може бути проблемою серед молодших розробників там, як я: обов'язково використовуйте "лямбда" >>>> "" ", а не" "" у вашому методі отримання ! * /

`` `const відповідь = очікувати отримання ( https://api....);

/ плюс, настійно рекомендується наступна стаття: 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();
});

Це повинно вирішити вашу проблему