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

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

ありがとう。

クリーンなExpressJSアプリでコードをチェックしましたが、問題なく動作します。

app.use(allowCrossDomain)configure関数の先頭に移動してみてください。

クレデンシャルでcookieをサポートするには、この行が必要です xhr.withCredentials = true;

mdn docs xhr.withCredentials

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

元の投稿がコメントとして入力されたため、このページを初めて見たときに本当に見落とされたため、これを回答として追加します。

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

上記で言及した元のコメントが2014年に行われたことも指摘する価値があるかもしれません。現在は2019年であり、npmパッケージのgithubページを見ると、リポジトリが最近9日前に更新されています。

この質問を閲覧するほとんどの人には当てはまりませんが、これとまったく同じ問題があり、解決策はに関連していませんでしたCORS。

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

これが誰かの役に立つことを願っています。