web-dev-qa-db-ja.com

ReactでAxiosを使用したアクセス制御オリジンヘッダーエラーChromeでのWebスローエラー

React WebアプリでAxiosを使用してAPI呼び出しを行っています。ただし、Chromeでエラーが発生するため、

XMLHttpRequestはロードできません https://example.restdb.io/rest/mock-data 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http：// localhost：808 'はアクセスを許可されません。

    {
      axios.get('https://example.restdb.io/rest/mock-data', {
      headers: { 
      'x-apikey': 'API_KEY',
      },
    responseType: 'json',
     }).then(response => {
      this.setState({ tableData: response.data });
    });
    }

また、「Access-Control-Allow-Origin」というタイトルの同じ問題に関するStackOverflowのいくつかの回答を読んだことがありますが、それを解決する方法はまだ考え抜かれています。拡張機能IN Chromeを使用したり、一時的なハックを使用してこれを解決したりしたくない。上記の問題を解決する標準的な方法を提案してください。

いくつかの答えを試した後、私はこれで試しましたが、

    headers: { 
      'x-apikey': '59a7ad19f5a9fa0808f11931',
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    },

今、私はエラーを受け取ります、

リクエストヘッダーフィールドAccess-Control-Allow-Originは、プリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません

javascriptrestreactjsgoogle-chromeaxios
14
SeaWarrior404

バックエンドがCORSをサポートしている場合、おそらく次のヘッダーをリクエストに追加する必要があります。

headers: {"Access-Control-Allow-Origin": "*"}

[更新]Access-Control-Allow-Originは応答ヘッダーであるため、有効にするためにCORS-サーバーからの応答にこのヘッダーを追加する必要があります。

しかし、ほとんどの場合、より良い解決策は リバースプロキシ を設定することです。これにより、サーバーはCORSを有効にせずに、フロントエンドからバックエンドにリクエストをリダイレクトできます。

CORSメカニズムに関するドキュメントは、ここにあります： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

9
Vlad Povalii

!!!私は同様の問題を抱えていたので、私の場合、リクエストのwithCredentials: trueはCORSチェックをアクティブにしているが、ヘッダーで同じを発行するとチェックが回避されることがわかりました：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials

withCredentials: trueを使用しないで、ヘッダーに'Access-Control-Allow-Credentials':trueを設定します

2
AMDP

私が理解しているように、リクエストはlocalhost：3000からlocalhost：8080に送信され、ブラウザはCORSなどのリクエストを拒否するということです。解決策はプロキシを作成することでした

私の解決策は：

import proxy from 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));
1
LvDevR1

Access-Control-Allow-Originヘッダーをリクエストに使用しても、その場合は役に立ちませんが、このヘッダーはレスポンスでのみ使用できます...

動作させるには、おそらくこのヘッダーをレスポンスに追加する必要があります。リクエストにヘッダーcrossorigin:trueを追加することもできます。

1
Chuck-Durst

ノードjs（backend）で、これらの行を追加してAccess-Control-Allow-Originをサポートし、

const express = require('express')
const app = express()
app.use(cors())
0
Parthasarathy S