Heroku의 Express / Node.js 애플리케이션에 대한 CORS REST 요청 허용

Question 1

Chrome의 js 콘솔 및 URL 표시 줄 등의 요청에 대해 작동하는 node.js 용 익스프레스 프레임 워크에 REST API를 작성했습니다. 이제 다른 앱의 요청에 대해 작동하도록 노력하고 있습니다. 도메인 (CORS).

자바 스크립트 프런트 엔드에 의해 자동으로 생성되는 첫 번째 요청은 / api / search? uri =에 대한 것이며 "프리 플라이트"OPTIONS 요청에서 실패한 것으로 보입니다.

내 익스프레스 앱에서 다음을 사용하여 CORS 헤더를 추가하고 있습니다.

var allowCrossDomain = function(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');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};

과:

app.configure(function () {
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(allowCrossDomain);
  app.use(express.static(path.join(application_root, "public")));
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

Chrome 콘솔에서 다음 헤더를 얻습니다.

요청 URL : http : //furious-night-5419.herokuapp.com/api/search? uri = http % 3A % 2F % 2Flocalhost % 3A5000 % 2Fcollections % 2F1 % 2Fdocuments % 2F1

요청 방법 : 옵션

상태 코드 : 200 OK

요청 헤더

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, x-annotator-auth-token, accept
Access-Control-Request-Method:GET
Connection:keep-alive
Host:furious-night-5419.herokuapp.com
Origin:http://localhost:5000
Referer:http://localhost:5000/collections/1/documents/1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5

쿼리 문자열 매개 변수

uri:http://localhost:5000/collections/1/documents/1

응답 헤더

Allow:GET
Connection:keep-alive
Content-Length:3
Content-Type:text/html; charset=utf-8
X-Powered-By:Express

API 애플리케이션에서 전송되는 적절한 헤더가없는 것처럼 보입니까?

감사.

Question 2

깨끗한 ExpressJS 앱에서 코드를 확인했는데 제대로 작동합니다.

app.use(allowCrossDomain)구성 기능의 맨 위로 이동하십시오 .

Question 3

자격 증명으로 쿠키를 지원하려면이 줄이 필요합니다. xhr.withCredentials = true;

mdn docs xhr.withCredentials

Express Server에서이 블록을 다른 모든 블록 앞에 추가하십시오.

`app.all('*', function(req, res, next) {
     var origin = req.get('origin'); 
     res.header('Access-Control-Allow-Origin', origin);
     res.header("Access-Control-Allow-Headers", "X-Requested-With");
     res.header('Access-Control-Allow-Headers', 'Content-Type');
     next();
});`

Question 4

나는 이것을 대답 으로 추가하고있다. 왜냐하면 원래 포스트가 코멘트로 씌여 졌기 때문에 내가이 페이지를 처음봤을 때 진정으로 당신이 간과했기 때문이다.

@ConnorLeech 위의 허용 대답에 자신의 의견에서 지적 하듯이, 당연한라는 매우 편리한 NPM 패키지가 고르 . 사용은 var cors = require('cors'); app.use(cors());(다시 말하지만 Leech의 답변에서 설명 함)만큼 간단하며 문서에 설명 된대로 더 엄격하고 구성 가능한 방식으로 적용 할 수도 있습니다. .

위에서 언급 한 원본 댓글이 2014 년에 작성되었다는 점도 지적 할 가치가 있습니다. 이제 2019 년이고 npm 패키지의 github 페이지를 보면 최근에 9 일 전에 리포지토리가 업데이트되었습니다.

Question 5

이 질문을 탐색하는 대부분의 사람들에게는 해당되지 않지만 정확히 동일한 문제가 있었고 해결책은 다음과 관련이 없습니다. CORS .

JSON 웹 토큰 시크릿 string이 환경 변수에 정의되지 않았으므로 토큰에 서명 할 수 없습니다. 이로 인해 POST시간 제한을 받고 503오류를 반환하기 위해 토큰을 확인하거나 서명하는 데 의존 하는 모든 요청 이 발생 하여 브라우저에 문제가 있음을 알립니다.CORS . Heroku에 환경 변수를 추가하면 문제가 해결되었습니다.

누군가에게 도움이되기를 바랍니다.

Question 6

아래 단계를 따르십시오.

npm 설치 cors --save

루트 js 파일 내부 :

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