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

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

---

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

Does this look like a lack of proper headers being sent by the API application?

Thanks.

---

I've cheked your code on a clean ExpressJS app and it works just fine.

Try move your app.use(allowCrossDomain) to the top of configure function.

---

for supporting cookies withCredentials you need this line xhr.withCredentials = true;

mdn docs xhr.withCredentials

In the Express Server add this block before all the other

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

---

It could not be the case for most people browsing this question but I had this exact same problem and the solution was not related to CORS.

Turns out that JSON Web Token secret string was not defined in the environment variables, so the token could not be signed. This caused to any POST request that relies on checking or signing a token to get a timeout and return a 503 error, telling the browser that there's something wrong in CORS, which it's not. Adding the environment variable in Heroku solved the issue.

I hope this helps someone.

---

I'm adding this as an answer only because the original post was put in as a comment and as such it got overlooked by yours truly the first time I went over this page.

As @ConnorLeech points out in his comment to the accepted answer above, there is a very handy npm package called, not surprisingly, cors. It's use is as simple as var cors = require('cors'); app.use(cors()); (again, cribbed from Mr. Leech's answer) and can also be applied in a stricter, more configurable fashion as outlined in their docs.

It may also be worth pointing out that the original comment I refer to above was made in 2014. It's 2019 now and looking at the npm package's github page the repo was updated as recently as nine days ago.

참고URL : https://stackoverflow.com/questions/11001817/allow-cors-rest-request-to-a-express-node-js-application-on-heroku