브라우저가 CORS 헤더를 OPTIONS 라우트에 추가 할 수없는 이유는 무엇입니까?

Express.js 웹 프레임 워크를 사용하는 Node.js 응용 프로그램에서 CORS를 지원하려고합니다. 나는 읽고 구글 그룹 토론 이 처리하는 방법과 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 요청 앞에 GET 또는 POST가 올바른지 확인하는 OPTIONS 요청이옵니다.

그래서 내 주요 질문은, 어떻게 이런 일이 일어나지 않는 것입니까? 왜 app.options 블록이 호출되지 않습니까? 기본 app.get 블록에서 헤더를 설정해야하는 이유는 무엇입니까?

주요 질문에 대답하기 위해 POST 또는 GET에 단순하지 않은 컨텐츠 나 헤더가있는 경우 CORS 스펙은 POST 또는 GET 앞에 OPTIONS 호출 만 필요합니다.

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 웹 API 참조-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());

Express 또는 Connect에 적합한보다 완벽한 미들웨어를 만들었습니다. 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();
    }
});

expressjs의 cors 모듈을 설치하십시오. 이 단계를 수행 할 수 있습니다>

설치

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

테스트는 다른 포트에서 express + node + ionic running으로 수행되었습니다.

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를 사용하고 im, 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);

    });

얼마 전에이 문제에 직면하여 nodejs 앱에서 CORS를 허용하기 위해이 작업을 수행했습니다.

먼저 아래 명령을 사용하여 설치해야합니다 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');

iframe도 허용됩니다.

아래 코드를 참조하십시오. 출처 : 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 (편집 : 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 수 있도록 , 모든 당신이 정말로 필요 일부입니다 익스프레스 미들웨어 설정합니다 것을 헤더 '액세스 제어는 - - 원산지 허용'는 . 브라우저에서 서버로 교차 요청 도메인을 허용하는 데 필요한 최소값입니다.

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

typescript에서 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)로 끝내는 차이점에 대한 Pat의 대답과 비슷합니다. 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.use-method 대신 app.options-method를 사용하므로이 검사를 수행 할 필요가 없습니다.

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

웹 앱에 다음 단계를 사용하여 성공했습니다.

express에 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라면 내 프로그래밍 패러다임을 바꿀 것입니다.

localhost 또는 이와 유사한 것을 요청하여 이러한 CORS가 차단되었다고 가정합니다.

이 같은 생산 optoins에 배포하려는 결국 경우 Google Cloud Platform나 Heroku또는 CORS 때 생산의 기원 또는 무엇이든을 허용 좋아에 대해, 당신은 전혀 걱정할 필요가 없습니다.

따라서 서버를 테스트 할 때 서버를 사용 postman하고 CORS를 차단하지 않으면 서버를 배포 한 다음 클라이언트에서 작업합니다.

/ * 먼저, 이것은 나 자신과 같은 주니어 개발자들 사이에서 문제가 될 수 있습니다. fetch 메소드 에서 " '"가 아닌 "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();
});

문제를 해결해야합니다