エクスプレスJS CORSブラウザ

Question

経由で要求されたとき - 私は（パスポート-strava）をstravaを使用して認証するために使用されるRESTゲッターいる

私はAPIのURLを起動すると、直接（http://localhost:3000/api/auth/strava） - 接続が成功し、プロファイル情報を取得できます。私は、私はこれがCORSに関連していることを理解していることかエラー

XMLHttpRequest cannot load https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

投げている - これは、ブラウザのウィジェットを通じて呼び出さHTMLボタンのつまりのonClickとバックエンドに経由するが 、ヘッダー "Access-Control-Allow-Origin"を含める必要がありますが、これを適切な値のヘッダーに追加することで猶予はありません。私はクロムを使用して通話傍受しようとした

：アクセス制御 - 許可 - 起源かどうかを確認するために//ネット内部が取り除かや通話の変化に気づいている -

APIを経由して直接呼び出すときに - ウィジェット経由でルーティングされたときに、

1097271 URL_REQUEST http://localhost:3000/api/auth/strava 
1097273 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097275 HTTP_STREAM_JOB https://www.strava.com/ 
1097276 CONNECT_JOB ssl/www.strava.com:443 
1097277 CONNECT_JOB ssl/www.strava.com:443 
1097278 SOCKET ssl/www.strava.com:443 
1097279 CONNECT_JOB ssl/www.strava.com:443 
1097280 CONNECT_JOB ssl/www.strava.com:443 
1097281 SOCKET ssl/www.strava.com:443 
1097282 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097283 HTTP_STREAM_JOB https://www.strava.com/ 
1097285 URL_REQUEST http://localhost:3000/api/auth/strava 
1097288 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097290 HTTP_STREAM_JOB https://www.strava.com/ 
1097291 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097292 HTTP_STREAM_JOB https://www.strava.com/ 
1097293 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava/callback?state=&code=7b5722c72f079ee2ac5dfeb7d5140cdc6375f5cc 

しかし、次のように呼び出しがある

1097337 URL_REQUEST http://localhost:3000/api/auth/strava 
1097339 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097344 URL_REQUEST https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097346 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097347 HTTP_STREAM_JOB https://www.strava.com/ 
1097348 CONNECT_JOB pm/ssl/www.strava.com:443 
1097349 CONNECT_JOB pm/ssl/www.strava.com:443 
1097350 HOST_RESOLVER_IMPL_JOB www.strava.com 
1097352 SOCKET pm/ssl/www.strava.com:443 
1097353 CONNECT_JOB pm/ssl/www.strava.com:443 
1097354 SOCKET pm/ssl/www.strava.com:443 

私が引き出すように見えた違いを次のように呼び出しがあります追加の電話番号

1097344 URL_REQUEST https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 

これは前のシナリオでは作成されていません。

これらの観察は、パスポート - ストラバパッケージだけでなく、パスポート - フェイスブックパッケージでも行われます。したがって、私は、この状態に入るために私がやっている重大な誤りがあると思います。

ご協力いただきまして誠にありがとうございます。

Answer 1

CORSについて既に知っているので、私は詳細に行きます。

基本的に問題はREST serverです。ブラウザが不平を言うことがないように、適切な内容の応答パケットのヘッダーを設定する必要があります。残念ながら、これはセキュリティ機能です。

サーバーコードでは、上記を行う関数を定義し、HTTPが通過するときにエクスプレスが解析するミドルウェアレイヤーの1に設定する必要があります。

例：

var express = require('express'); 
var app = express(); 

var httpAccessControlPolicy = function(req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    res.setHeader('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key,Authorization'); 
    res.setHeader('Access-Control-Allow-Credentials', false); 

    next(); 
}; 

app.use(httpAccessControlPolicy); 

はい。コメント者の1人が指摘しているように、npmモジュールcorsもジョブを実行できます。

CORS：あなたはそれを使用するように意図されている場合は、この例の使用状況を見ているかもしれないhttps://www.npmjs.com/package/cors

：あなたのサーバー上でCORSヘッダを有効にするには、このプラグインを使用することができます

var express = require('express') 
    , cors = require('cors') 
    , app = express(); 

app.use(cors()); 

app.get('/products/:id', function(req, res, next){ 
    res.json({msg: 'This is CORS-enabled for all origins!'}); 
}); 

app.listen(80, function(){ 
    console.log('CORS-enabled web server listening on port 80'); 
});