web-dev-qa-db-ja.com

React（同形アプリ）からAPI呼び出しが行われた場合の「Access-Control-Allow-Origin」の問題

ReactおよびExpressを使用した同形JavaScriptアプリで問題が発生しています。

コンポーネントのマウント時にaxios.getでHTTPリクエストを作成しようとしています

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

APIからステータス200 resを取得していますが、コンソールで応答データとエラーを取得していません

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

ただし、server.jsでリクエストを行うと

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

正常に機能し、サーバーの起動時に応答データを取得します。これは実際のAPIの問題ですか、それとも何か間違っていますか？これがCORSの問題である場合、server.jsのリクエストも機能しないと思いますか？ありがとう！

javascriptnode.jsreactjsisomorphic-javascriptaxios
18
Scott Davidson

CORSはブラウザー機能です。サーバーは、ブラウザーが同一生成元ポリシーをバイパスできるように、CORSを選択する必要があります。サーバーには同じ制限はなく、パブリックAPIを使用して任意のサーバーにリクエストを送信できます。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Webアプリのプロキシとして機能できるCORSを有効にして、サーバーにエンドポイントを作成します。

16
azium

Allow-Control-Allow-Origin：* というGoogle Chrome拡張機能を使用します。アプリケーションのその場でCORSヘッダーを変更します。

16
Colleen Purcell

あなたの質問に対する答えは here だと思います

ChromeにヘッダーでAccess-Control-Allow-Originを送信させるには、/ etc/hostsファイルのlocalhostを他のドメインにエイリアスします：

127.0.0.1 localhost yourdomain.com

2
Pablo Darde

これが役立つかどうかはわかりませんが、反応ネイティブアプリケーションのリモートデバッグ時に同じエラーが発生していました。デバッガを192.168.x.x：8081で実行していました。私はこれについて少し読みました Cross-Origin Resource Sharing（CORS） CORSとは何かを自分自身で教育するために。 （私は初心者です）、URLをIP：8081からlocalhost：8081に変更すると、問題が解決しました。

0
Mingina

同じ問題がありました。他の答えは正しいですが、別の解決策があります。応答ヘッダーを設定して、クロスオリジンアクセスを許可できます。 この投稿 に従って、app.get呼び出しの前に次のコードを追加する必要があります。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

これは私のために働いた:)

0
arash nadali

サーバーにはCORSヘッダーがないため、応答を取得できません。

これは、ChromeブラウザからキャプチャしたAPIのヘッダーです。

Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

応答ヘッダーにCORSヘッダーがありません。

0
Thanh Nguyen