web-dev-qa-db-ja.com

ReactJS APIデータフェッチングCORSエラー

私はインターンシップのために数日間反応Webアプリを作成しようとしていますが、CORSエラーが発生しました。私は最新バージョンのreactJSを使用しており、これをcreate-react-app、および以下はフェッチ用のコードです。

componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-Origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }

会社の規則によりAPIのURLを投稿できないのは残念ですが、APIバックエンドにCORS設定がないことが確認されています。

しかし、mozillaで実行すると次のエラーが発生します

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

そして

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).

chromeで実行すると、次のエラーが発生します

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

そして

Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

そして

Uncaught (in promise) TypeError: Failed to fetch

もう1つは、問題なくブラウザでURLを開くことができるということです。

助けてくれてありがとう！

追加情報

CORS設定を追加した理由は、CORSエラーが発生するためです。したがって、この設定を削除しても問題は解決しません。

次に、プロキシ設定を実行しようとしましたが、現在では

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

インターネットによると、これは応答がJSONではないために発生します。ただし、APIを確認すると、これが表示されます

api img

つまり、戻り値の型はJSONである必要がありますか？

追加情報

応答を確認すると、これが得られます

{"status"：200、 "total"：1、 "per_page"：3、 "current_page"：1、 "last_page"：1、 "next_page_url"：null、 "prev_page_url"：null、 "from"：1、 " to "：3、" data "：[{" id "：1、" slug "：" america "、" name "：" america "、" address_1 "：" USA Court "、" address_2 "：" USA "、 "city"： "USA"、 "state"： "USA"、 "postal_code"： "94545"、 "country_code"： "US"、 "phone_number"： "10000001"、 "created_by"：null、 "updated_by"： null、 "created_at"： "2017-11-10 11：30：50 + 00"、 "updated_at"： "2018-06-28 07：27：55 + 00"}]}

javascriptreactjscors
6
Last

Reactアプリドメインからのアクセスを許可するには、APIでCORS設定をセットアップする必要があります。 CORS設定なし、異なるドメインからのAJAXなし。それは簡単です。会社のAPIにCORS設定を追加するか（これは起こりそうにありません）、または以下で説明するように回避できます：

CORSは、悪意のあるAJAXからユーザーを保護するためのクライアントブラウザのメカニズムにすぎません。そのため、これを回避する1つの方法は、AJAXアプリからのReactリクエストを独自のWebサーバーにプロキシすることです。 Vincentが示唆するように、_create-react-app_はこれを簡単に行う方法を提供します：_package.json_ファイルで、単に_"proxy": "http://your-company-api-domain"_をチャックします。詳細については、こちらをご覧ください link

次に、Reactアプリで、fetch('/api/endpoints')のような相対URLを使用できます。相対URLは会社のAPIと一致する必要があることに注意してください。これによりリクエストがサーバーに送信され、サーバーはリクエストを会社のAPIに転送し、アプリにレスポンスを返します。要求はブラウザからサーバーへではなくサーバーからサーバーへの方法で処理されるため、CORSチェックは行われません。したがって、リクエスト内の不要なCORSヘッダーをすべて取り除くことができます。

15
Dat Pham