옵션 경로에 CORS 헤더를 추가하면 브라우저에서 내 API에 액세스할 수 없는 이유는 무엇입니까?

옵션 경로에 CORS 헤더를 추가하면 브라우저에서 내 API에 액세스할 수 없는 이유는 무엇입니까?

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

효과가 없는 것 같습니다.제 브라우저(크롬)가 초기 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 블록이 호출되지 않는 이유는 무엇입니까?메인 앱.get block에서 헤더를 설정해야 하는 이유는 무엇입니까?

가장 쉬운 방법은 node.js 패키지 cors를 사용하는 것입니다.가장 간단한 사용 방법은 다음과 같습니다.

var cors = require('cors')

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

물론 필요에 따라 동작을 구성하는 방법은 여러 가지가 있습니다. 위에 링크된 페이지에는 여러 가지 예가 나와 있습니다.

다음 일치하는 경로로 제어 권한을 전달해 보십시오.Express가 app.get route와 일치하는 경우 다음 작업을 수행하지 않으면 옵션 경로로 계속 진행되지 않습니다(다음 사용 참고).

app.get('somethingelse', (req, res, next) => {
  //..set headers etc.
        
  next();
});

CORS 물건을 정리하는 측면에서, 나는 그것을 미들웨어에 넣었고, 그것은 나에게 잘 작동합니다.

// CORS middleware
const allowCrossDomain = (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(() => {
  app.use(express.bodyParser());
  app.use(express.cookieParser());
  app.use(express.session({ secret: `cool beans` }));
  app.use(express.methodOverride());
  // CORS middleware
  app.use(allowCrossDomain);
  app.use(app.router);
  app.use(express.static(`public`));
});

주요 질문에 답변하기 위해 CORS 사양은 POST 또는 GET에 단순하지 않은 내용이나 헤더가 있는 경우 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 사전 플라이트된 요청 참조

라우팅에 대한 동일한 아이디어를 유지하는 것.다음 코드를 사용합니다.

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

다음과 같은 작업을 수행합니다.

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

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 를 참조하십시오.

다른 포트에서 실행되는 express + node + ionic을 사용하여 테스트가 완료되었습니다.

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

먼저 프로젝트에 코르스를 설치합니다. 프롬프트) 및 Terminal(명령 프롬프트) »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();
});

제게 효과가 있었습니다.

얼마 전에 저는 이 문제에 직면해서 제 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);

이것은 경로 내에서 쉽게 구현할 수 있기 때문에 저에게 효과가 있습니다. 저는 manjs와 작동 상태, 사파리, 크롬 등을 사용합니다.

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

    });

컨트롤러별로 설정하려면 다음을 사용할 수 있습니다.

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도 허용됩니다.

내 안에서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();
}) 

cors패키지는 express.js에서 CORS 정책 문제를 해결하기 위해 권장되는 방법이지만, 당신은 또한 그것을 활성화할 필요가 있습니다.app.options또한 아래와 같이:

const cors = require('cors');

// enable cors
app.use(
  cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
  })
);
app.options(
  '*',
  cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
  })
);

아래의 코드를 참조할 수 있습니다.출처:Academynd/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
})

가장 쉬운 대답은 그냥 코르스 패키지를 사용하는 것입니다.

const cors = require('cors');

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

그것은 전반적으로 CORS를 가능하게 할 것입니다.외부 모듈 없이 CORS를 활성화하는 방법을 배우고 싶다면 '액세스-컨트롤-오리지널 허용' 헤더를 설정하는 Express 미들웨어만 있으면 됩니다.이 값은 브라우저에서 서버로 교차 요청 도메인을 허용하는 데 필요한 최소 값입니다.

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

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

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', ...)효과도 있을 것이고...

나를 위해 일한 아래, 누군가에게 도움이 되기를 바랍니다!

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 에서 참조 자료를 받았습니다.

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

이것은 당신의 문제를 해결할 것입니다.

사용.CORS꾸러미다음 매개 변수를 입력합니다.

cors({credentials: true, origin: true, exposedHeaders: '*'})

만약 당신이 (배우는 순수한 즐거움을 위해) 코르스 NPM 패키지 없이 코르스를 일하게 하고 싶다면, 당신은 분명히 OPTIONS 호출을 처리할 수 있습니다.제가 성공한 것은 다음과 같습니다.

app.options('*', (req, res) => {
    res.writeHead(200, '', {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS',
    }).end();
});

간단하죠?res를 사용합니다.res 대신 head()를 씁니다.헤더(), 저는 잘 모릅니다.

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 오류 처리를 위해 서드파티션 라이브러리를 사용하지 않으려면 HandleCOSerrors() 메서드를 변경해야 합니다.

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

Express 미들웨어를 사용하는 것은 저에게 매우 유용합니다.이미 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);
});

언급

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

이것은 제가 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 .

가장 간단한 방법은 다음을 사용하여 프로젝트에 Cors 모듈을 설치하는 것입니다.

npm i --save cors

그런 다음 다음을 사용하여 서버 파일로 가져옵니다.

import cors from 'cors';

그런 다음 다음과 같은 미들웨어로 사용합니다.

app.use(cors());

이것이 도움이 되길 바랍니다!

단순한 것은 어렵습니다.

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

Express 서버에서 권한 부여를 사용하도록 설정한 경우 다음과 같이 수행할 수 있습니다.

const express = require('express');
const app=express();
const cors=require("cors");
app.use(cors({
   credentials: true, // for authorization
}));
...

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

언급URL : https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my