web-dev-qa-db-ja.com

フェッチエラーリクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

私はフェッチAPIを使用して他のAPIからデータを取得しています。これは私のコードです。

_var result = fetch(ip, {
        method: 'get',
    }).then(response => response.json())
      .then(data => {
        country = data.country_name;
        let lat = data.latitude;
        let lon = data.longitude;                       
        //fetch weather api with the user country
        return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`);
    })
    .then(response => response.json())
    .then(data => {
        // access the data of the weather api
        console.log(JSON.stringify(data))
    })
    .catch(error => console.log('Request failed', error));
_

しかし、コンソールでエラーが発生しました：

_Fetch API cannot load https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/52.3824,4.8995. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
_

2番目のフェッチのヘッダーを設定します。

_return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`, {
  mode: 'no-cors',
  header: {
    'Access-Control-Allow-Origin':'*',
  }
}); 
_

エラーはなくなりますが、console.log(JSON.stringify(data))はコンソールに何も記録せず、フェッチは値を返しません。私のコードの何が問題なのですか？

javascriptfetchfetch-api
8
Mi La

問題はJavaScriptコードではなく、APIにあります。サーバーはクロスOriginリクエストをサポートしていません。このAPIの所有者である場合、追加する必要があります'Access-Control-Allow-Origin'許可されたオリジンを含む応答へのヘッダー（*すべてのオリジンから許可する）。 jsonpリクエストが機能する場合もあります。

注：この問題は、リクエストがブラウザから生成された場合にのみ発生します

7
Souhail Ben Slimene

この問題は、URLの後に「no-cors」引数を使用することで修正できます

fetch(url, {mode: "no-cors"})
2
Chamod Pathirana