web-dev-qa-db-ja.com

CORSを許可するREST HerokuのExpress / Node.jsアプリケーションへのリクエスト

ChromeのjsコンソールやURLバーなどからのリクエストに対して動作するnode.jsのエクスプレスフレームワークでREST APIを記述しました。別のドメイン（CORS）にある別のアプリからのリクエストの場合。

Javascriptフロントエンドによって自動的に行われる最初の要求は/ 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

リクエスト方法：OPTIONS

ステータスコード：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アプリケーションによって送信される適切なヘッダーの欠如のように見えますか？

ありがとう。

node.jsrestherokuexpresscors
87
Jamie

きれいなExpress JSアプリでコードを確認しましたが、問題なく動作します。

app.use(allowCrossDomain)をconfigure関数の一番上に移動してみてください。

59
Olegas

cookieで資格情報をサポートするには、この行が必要です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();
});`
4
doron aviguy

この質問を閲覧しているほとんどの人には当てはまらないかもしれませんが、私はこれとまったく同じ問題を抱えており、解決策はCORSに関連していませんでした。

JSON Web Tokenシークレットstringは環境変数で定義されていなかったため、トークンに署名できませんでした。これにより、タイムアウトを取得して503エラーを返すトークンのチェックまたは署名に依存するPOSTリクエストが発生し、ブラウザにCORSに何か問題があることを通知しました。ありません。 Herokuに環境変数を追加すると、問題が解決しました。

これが誰かの助けになることを願っています。

0
CatBrownie

これをanswerとして追加しているのは、元の投稿がコメントとして挿入されたため、初めてあなたが本当に見落としたためですこのページに行きました。

@ConnorLeechが上記の受け入れられた答えに対するコメントで指摘しているように、非常に便利なnpmパッケージがあります。これは驚くことではありませんが、 cors です。使用方法はvar cors = require('cors'); app.use(cors());（リーチ氏の回答から引用）と同じくらい簡単で、 docs に概説されているように、より厳密でより設定可能な方法で適用することもできます。

上記で言及した元のコメントは2014年に作成されたものであることも指摘しておく必要があります。2019年になり、 npmパッケージのgithubページ が9日前に更新されました。

0
flyingace