web-dev-qa-db-ja.com

HTML5フェッチAPIを使用してAccess-Control-Allow-Originヘッダーを許可する

HTML5フェッチAPIを使用しています。

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

通常のJSONを使用できますが、上記のAPI URLのデータを取得できません。エラーがスローされます：

Fetch APIはロードできません https://davidwalsh.name/demo/arsenal.json 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost 'はアクセスを許可されません。不透明な応答がニーズを満たしている場合、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

htmlapiurlfetch-api
48
iNikkz

Epascarelloが言ったように、リソースをホストするサーバーはCORSを有効にする必要があります。クライアント側でできること（そしておそらくあなたが考えていること）は、フェッチのモードをCORSに設定することです（ただし、これはデフォルトの設定です）。

fetch(request, {mode: 'cors'});

ただし、このstillでは、サーバーでCORSも有効にし、ドメインがリソースを要求できるようにする必要があります。

CORSドキュメント と、この 素晴らしいUdacityビデオ同じオリジンポリシー の説明をご覧ください。

クライアント側でno-corsモードを使用することもできますが、これは不透明な応答を提供するだけです（本文を読み取ることはできませんが、応答はサービスワーカーによってキャッシュされるか、<img>などの一部のAPIによって消費されます。 ）：

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});
51
David Scales

フロントコードを http：// localhost：30 で実行し、API（バックエンドコード）を http：// localhost：50 で実行しました

APIを呼び出すためにフェッチAPIを使用していました。最初は「cors」エラーを投げていました。次に、バックエンドAPIコードに以下のコードを追加し、どこからでもOriginとヘッダーを許可します。

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

ただし、stage、prodなどの他の環境の場合は、元を制限する必要があります。

6
smsivaprakaash

私はこれが古い投稿であることを知っていますが、このエラーを修正するために働いたのは、フェッチ要求内でドメイン名を使用する代わりにサーバーのIPアドレスを使用することでした。たとえば、次のとおりです。

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});
3
MattG

Nginxを使用している場合は、これを試してください

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-Origin-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,Origin,x-requested-with,access-control-allow-Origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }
0
Caliari