クライアントからサーバーへのGET要求でエラーが発生しました。 'アクセス制御が許可されません - 起点'

Question

localhostでnode/express jsアプリケーションを実行しています。私は、InstagramののAPIに「GET」リクエストを行うと、このエラーを取得維持しています：

XMLHttpRequest cannot load https://api.instagram.com/oauth/authorize/?client_id=******&redirect_uri=http://localhost:4000/feed&response_type=code. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4000' is therefore not allowed access. 

私はこのような私のサーバーで要求を行います。

私に「/」を訪問からデータを取得

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Headers: x-requested-with"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

app.get('/',function(req,res){ 
    res.redirect(redirected to feed route); 
}) 

app.get('/feed',function(req,response) {  
    var code = req.query.code; 
    var url = "https://api.instagram.com/oauth/access_token"; 
    var options = { 
     url: url, 
     method: "POST", 
     form: { 
     client_id : clientId, 
     client_secret : client_secret, 
     grant_type: 'authorization_code', 
     redirect_uri: redirect_uri, 
     code: code 
     }, 
     json: true 
    } 

    request(options, function(err,res,body){ 
     var instagram_response = body; 
     response.json({access_info:instagram_response}); 
    }) 
}) 

サーバーのルートは正常に動作します。以下のようにjQueryを使用してクライアント側（Gallery.htmlがロードされるとき）のサーバー '/'ルートを呼び出すと、エラーが表示されます。以下は、gallery.htmlがクライアント側にロードされたときに実行される関数です。

$(function(){ 
    $.get("/", function(instagram_reponse, access_token) { 
    access_token = instagram_reponse.access_token; 
    }) 
}) 

ノードサーバーがローカルホスト上で実行されているため、このエラーが発生しますか？私は間違って何をしていますか？

Answer 1

あなたがCORSパッケージが..ノードにインストールする必要が

$ npm install cors 

VAR速達=必要（ '表現'） 、CORSの=は）（（ 'CORS'） 、アプリ=速達を必要とします。

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'); 
}); 

設定オプション 起源：はアクセス制御 - 許可 - 起源 CORSヘッダーを設定します。文字列が必要です（例： "http://example.com"）。 req.header（ 'Origin'）で定義されているリクエストの起点を反映するためにtrueに設定します。 CORSを無効にするには、falseに設定します。また、要求原点を最初のパラメータとし、コールバック（シグネチャerr [object]、expect [bool]）を2番目の引数とする関数に設定することもできます。最後に、正規表現（/example.com$/）または一致する正規表現や文字列の配列にすることもできます。

メソッド：アクセス制御許可メソッドCORSヘッダーを設定します。カンマ区切りの文字列（例： 'GET、PUT、POST'）または配列（例：[GET '、' PUT '、' POST ']）が必要です。

allowedHeaders：アクセス制御ヘッダーのCORSヘッダーを設定します。コンマ区切りの文字列（例： 'Content-Type、Authorization'）または配列（例：['Content-Type'、 'Authorization']）が必要です。指定しない場合、デフォルトでは、要求のAccess-Control-Request-Headersヘッダーで指定されたヘッダーが反映されます。

exposedHeaders：アクセス制御ヘッダーのCORSヘッダーを設定します。コンマ区切りの文字列（例： 'Content-Range、X-Content-Range'）または配列（例：['Content-Range'、 'X-Content-Range']）が必要です。指定しない場合、カスタムヘッダーは公開されません。 credentials：Access-Control-Allow-Credentials CORSヘッダーを設定します。ヘッダーを渡す場合はtrueに設定し、そうでない場合は省略します。

maxAge：アクセス制御可能な最大エージングCORSヘッダーを設定します。ヘッダーを渡すには整数に設定します。それ以外の場合は省略されます。

preflightContinue： CORSプリフライト応答を次のハンドラに渡します。

詳細を参照https://www.npmjs.com/package/cors