Axiosはアクセス制御 - 許可しない-起源

Question

私はエラーにNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

を実行し続ける私はこれが以外に頻繁にウェブ上での質問をし、私はstackoverflowの上ここには参考になっ答えを見ないであることを承知していますJSONPを使用した回避策。

私のコードは

componentDidMount() { 
    if (navigator.geolocation){ 
     function success(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     axios.get(`https://api.darksky.net/forecast/apikey/`+latitude+`,`+longitude+`?units=auto`) 
     .then(result => { 
      this.setState({ 
      daily: result.data.daily.data, 
      loading: false, 
      error: null 
      }); 
     }) 
      .catch(err => { 
      // Something went wrong. Save the error in state and re-render. 
      this.setState({ 
       loading: false, 
       error: err 
      }); 
      }); 
     }; 
     function error() { 
     console.log('geolocation error') 
     }; 
     navigator.geolocation.getCurrentPosition(success.bind(this), error); 
    } 
    } 

Answer 1

それはAJAX呼び出しのために、ブラウザの制限である、ここでのみ利用可能な3つのオプションがあります。

1. 要求されたサーバーを所有している場合は、アプリケーションドメインとしてAccess-Control-Allow-Originを追加できます。

これ以外のオプションはありません。

2. コールバックを使用した応答形式nプロセスとしてのJSONPの使用。

3. たとえば、サーバー側プロキシを使用できます。あなたは、サーバー側へのアクセスを持っている場合は、api.darksky.net

、あなたはすなわちを使用したい外部ドメインへのnginxまたはApacheの設定マップ「somerequest」パスに

Answer 2

をyourapplication.com/somerequestを呼び出すことができますアプリケーションの場合は、Mohamed Jahaber Sadiqが提供する1番目の回答に従います

目的を達成するには、Allow-Control-Allow-Origin：*クロムプラグインを使用してください。すべての応答はクロムを介して処理されます。