Tại sao không thêm tiêu đề CORS vào tuyến TÙY CHỌN cho phép trình duyệt truy cập API của tôi?

Tôi đang cố gắng hỗ trợ CORS trong ứng dụng Node.js sử dụng khung web Express.js. Tôi đã đọc một cuộc thảo luận nhóm của Google về cách xử lý việc này và đọc một vài bài viết về cách thức hoạt động của CORS. Đầu tiên, tôi đã làm điều này (mã được viết theo cú pháp 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ó dường như không hoạt động. Có vẻ như trình duyệt của tôi (Chrome) không gửi yêu cầu TÙY CHỌN ban đầu. Khi tôi vừa cập nhật khối cho tài nguyên, tôi cần gửi yêu cầu GET nguồn gốc chéo tới:

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

Nó hoạt động (trong Chrome). Điều này cũng hoạt động trong Safari.

Tôi đã đọc rằng ...

Trong trình duyệt triển khai CORS, mỗi yêu cầu GET hoặc POST có nguồn gốc chéo được bắt đầu bằng một yêu cầu TÙY CHỌN để kiểm tra xem GET hoặc POST có ổn không.

Vì vậy, câu hỏi chính của tôi là, tại sao điều này dường như không xảy ra trong trường hợp của tôi? Tại sao khối app.options của tôi không được gọi? Tại sao tôi cần đặt các tiêu đề trong khối app.get chính của mình?

Để trả lời câu hỏi chính của bạn, thông số CORS chỉ yêu cầu cuộc gọi TÙY CHỌN đi trước POST hoặc GET nếu POST hoặc GET có bất kỳ nội dung hoặc tiêu đề không đơn giản nào trong đó.

Loại nội dung yêu cầu yêu cầu trước chuyến bay CORS (cuộc gọi TÙY CHỌN) là bất kỳ Loại nội dung nào ngoại trừ các loại sau :

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

Bất kỳ loại Nội dung nào khác ngoài các loại được liệt kê ở trên sẽ kích hoạt yêu cầu trước chuyến bay.

Đối với Tiêu đề, mọi Tiêu đề yêu cầu ngoài các tiêu đề sau sẽ kích hoạt yêu cầu trước chuyến bay:

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

Bất kỳ Tiêu đề yêu cầu nào khác sẽ kích hoạt yêu cầu trước chuyến bay.

Vì vậy, bạn có thể thêm một tiêu đề tùy chỉnh, chẳng hạn như: x-Trigger: CORSvà điều đó sẽ kích hoạt yêu cầu trước chuyến bay và nhấn khối TÙY CHỌN.

Xem Tài liệu tham khảo API Web MDN - Các yêu cầu được chiếu trước của CORS

Tôi thấy cách dễ nhất là sử dụng các gói Node.js CORS . Cách sử dụng đơn giản nhất là:

var cors = require('cors')

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

Tất nhiên, có nhiều cách để cấu hình hành vi theo nhu cầu của bạn; trang được liên kết ở trên cho thấy một số ví dụ.

Hãy thử chuyển điều khiển sang tuyến đường phù hợp tiếp theo. Nếu Express phù hợp với app.get tuyến đầu tiên, thì nó sẽ không tiếp tục trên tuyến tùy chọn trừ khi bạn thực hiện việc này (lưu ý sử dụng tiếp theo) :

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

    next();
});

Về mặt tổ chức các công cụ CORS, tôi đặt nó vào một phần mềm trung gian hoạt động tốt cho tôi:

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

Để ở trong cùng một ý tưởng định tuyến. Tôi sử dụng mã này:

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

Tương tự như http://enable-cors.org/server_expressjs.html ví dụ

làm

npm install cors --save

và chỉ cần thêm các dòng này trong tệp chính của bạn nơi yêu cầu của bạn đi (giữ nó trước bất kỳ tuyến đường nào).

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

Tôi đã thực hiện một phần mềm trung gian hoàn chỉnh hơn phù hợp để thể hiện hoặc kết nối. Nó hỗ trợ OPTIONScác yêu cầu kiểm tra preflight. Lưu ý rằng nó sẽ cho phép CORS truy cập vào bất cứ điều gì, bạn có thể muốn đưa vào một số kiểm tra nếu bạn muốn giới hạn quyền truy cập.

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

cài đặt mô-đun cors của expressjs. bạn có thể làm theo các bước sau>

Cài đặt

npm install cors

Sử dụng đơn giản (Kích hoạt tất cả các yêu cầu CORS)

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

để biết thêm chi tiết, hãy truy cập https://github.com/expressjs/cors

Làm một cái gì đó như thế này:

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

Kiểm tra được thực hiện với express + nút + ion chạy trong các cổng khác nhau.

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

đầu tiên chỉ cần cài đặt cors trong dự án của bạn. Lấy terminal (dấu nhắc lệnh) và cdvào thư mục dự án của bạn và chạy lệnh dưới đây:

npm install cors --save

Sau đó lấy tệp server.js và thay đổi mã để thêm phần sau vào đó:

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

Điều này làm việc cho tôi ..

Điều này làm việc cho tôi, vì nó là một triển khai dễ dàng bên trong các tuyến đường, tôi đang sử dụng meanjs và nó hoạt động tốt, safari, chrome, v.v.

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

    });

Cách đây một thời gian, tôi đã gặp phải vấn đề này vì vậy tôi đã làm điều này để cho phép CORS trong ứng dụng nodejs của mình:

Trước tiên, bạn cần cài đặt cors bằng cách sử dụng lệnh dưới đây:

npm install cors --save

Bây giờ hãy thêm đoạn mã sau vào tệp bắt đầu ứng dụng của bạn như ( 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);

Trong tôi index.jstôi đã thêm:

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

Nếu bạn muốn làm cho nó điều khiển cụ thể, bạn có thể sử dụng:

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

Xin lưu ý rằng điều này cũng sẽ cho phép iframe.

Có thể tham khảo mã dưới đây cho cùng. Nguồn: 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
})

Giải pháp đơn giản nhất của tôi với Express 4.2.0 (EDIT: Dường như không hoạt động trong 4.3.0) là:

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

Tôi cho rằng làm app.all('/result', ...)cũng sẽ làm việc ...

Câu trả lời đơn giản nhất là chỉ sử dụng gói cors .

const cors = require('cors');

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

Điều đó sẽ cho phép CORS trên bảng. Nếu bạn muốn tìm hiểu cách bật CORS mà không cần các mô-đun bên ngoài , tất cả những gì bạn thực sự cần là một số phần mềm trung gian Express đặt tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' . Đó là mức tối thiểu bạn cần để cho phép các miền yêu cầu chéo từ trình duyệt đến máy chủ của bạn.

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

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

Sử dụng Express Middleware hoạt động rất tốt cho tôi. Nếu bạn đã sử dụng Express, chỉ cần thêm các quy tắc phần mềm trung gian sau. Nó sẽ bắt đầu làm việc.

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

Tài liệu tham khảo

Dưới đây làm việc cho tôi, hy vọng nó sẽ giúp được ai đó!

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

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

Có tài liệu tham khảo từ https://expressjs.com/en/resource/middleware/cors.html#configuring-cors

Tôi thấy việc này cực kỳ dễ dàng với gói yêu cầu npm ( https://www.npmjs.com/package/request )

Sau đó, tôi dựa trên giải pháp của mình cho bài đăng này 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'));
});

Trong nguyên cảo, nếu bạn muốn sử dụng Node.js gói 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;

Nếu bạn không muốn sử dụng các thư viện phần thứ ba để xử lý lỗi cors, bạn cần thay đổi phương thức 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;

Để sử dụng tệp 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);

Điều này tương tự với câu trả lời của Pat với sự khác biệt mà tôi kết thúc với res.sendStatus (200); thay vì tiếp theo ();

Mã này sẽ nắm bắt tất cả các yêu cầu của loại phương thức TÙY CHỌN và gửi lại các tiêu đề kiểm soát truy cập.

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

Mã chấp nhận CORS từ tất cả các nguồn gốc theo yêu cầu trong câu hỏi. Tuy nhiên, sẽ tốt hơn nếu thay thế * bằng một nguồn gốc cụ thể, ví dụ như http: // localhost: 8080 để ngăn chặn việc sử dụng sai.

Vì chúng tôi sử dụng phương thức app.options thay vì phương thức app.use, chúng tôi không cần thực hiện kiểm tra này:

req.method === 'OPTIONS'

mà chúng ta có thể thấy trong một số câu trả lời khác.

Tôi tìm thấy câu trả lời ở đây: http://johnzhang.io/options-request-in-express .

Bạn có thể sử dụng Express middleware, chặn tên miền và phương thức của bạn.

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

Thay vào đó, chúng tôi có thể tránh CORS và chuyển tiếp yêu cầu đến máy chủ khác:

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

Tôi đã sử dụng các bước sau cho ứng dụng web của mình và tôi đã thành công:

Thêm gói cors vào express:

npm install cors --save

Thêm các dòng sau sau cấu hình bodyParser . Tôi đã gặp một số rắc rối khi thêm trước 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.

Cách tiếp cận đơn giản nhất là cài đặt mô-đun cors trong dự án của bạn bằng cách sử dụng:

npm i --save cors

Sau đó, trong tệp máy chủ của bạn nhập nó bằng cách sử dụng như sau:

import cors from 'cors';

Sau đó, chỉ cần sử dụng nó như một phần mềm trung gian như thế này:

app.use(cors());

Hi vọng điêu nay co ich!

Nếu tôi là bạn @OP tôi sẽ thay đổi mô hình lập trình của mình.

giả sử bạn đang bị các CORS này chặn vì bạn đang yêu cầu localhost hoặc một cái gì đó tương tự.

Cuối cùng, nếu bạn định triển khai để sản xuất optoin như Google Cloud Platformhoặc Heroku, bạn sẽ không phải lo lắng về CORS như cho phép nguồn gốc hoặc bất cứ điều gì khi sản xuất.

Vì vậy, khi kiểm tra máy chủ chỉ cần sử dụng postmanvà bạn sẽ không bị chặn CORS, sau đó triển khai máy chủ của bạn và sau đó làm việc trên máy khách của bạn.

/ * trước hết, và đây có thể là vấn đề giữa các nhà phát triển cơ sở ngoài kia, như tôi: đảm bảo sử dụng "lambda" >>>> "" "chứ không phải" '"trong phương thức tìm nạp của bạn ! * /

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

/ plus, bài viết sau rất được khuyến khích: https://developer.edamam.com/api/faq /

đơn giản là khó:

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

Hãy thử điều này trong tệp js chính của bạn:

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

Điều này sẽ giải quyết vấn đề của bạn