web-dev-qa-db-ja.com

react.js | Codesandboxのクロスオリジンエラーを取り除く方法

IN FIREFOX：コードを実行すると、「TypeError：未定義のプロパティ 'setState'を読み取れません」という典型的なエラーが発生し、代わりに非常に奇妙なクロスオリジンエラーが発生しました。

これがエラーのスクリーンショットです： http://prntscr.com/iwipnbenter image description here

エラークロスオリジンエラーがスローされました。 Reactは開発中の実際のエラーオブジェクトにアクセスできません。詳細は https://reactjs.org/docs/cross-Origin-errors.html を参照してください情報。

これが私のコードです： https://codesandbox.io/s/4885l37xrw

Codesandbox FIREFOXのクロスオリジンエラーを回避するにはどうすればよいですか？

EDIT1：私はコードのバグ（bind（this））が何であるか知っています。 クロスオリジンエラー Firefoxの問題を探しています。ありがとう

reactjsamazon-s3codesandbox
7
lito

機能するS3バケットでCORSを有効にする必要があるようです： https://s3-eu-west-1.amazonaws.com/codesandbox-downtime/downtime.json

これを行うには、バケットに移動して[権限]タブをクリックし、[CORS]ボックスに、必要な権限を持つXMLドキュメントを入力します。すべてのホストがGETリクエストを行えるようにするためのサンプル権限：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
2
duhaime

あなたの質問で述べられているクロスオリジンエラーは、Codesandboxのgithubリポジトリの 未解決の問題 （2019年12月現在）です。

Reactjsのウェブサイトはこれについて Cross-Origin Errors で説明しています

混同しないでください Cross Origin Resource Sharing

0
mdsadiq

これをAPIファイルコンストラクターに追加

public function __construct($config = 'rest'){
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
   header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      parent::__construct();
    }
0
Amit Kashyap

Corsproxyを使用して、ローカルマシンからlocalhost APIにアクセスできます。

  1. まず、corsproxy npmパッケージをインストールする必要があります。 npm install -g corsproxy

  2. 端末でcorsproxyコマンドを実行する

  3. http：// localhost：1337 で実行されます
  4. 次に、API呼び出しに上記のURLを追加する必要があります。 APIをヒットするには、localhost：3000/customerをヒットする必要があるとしましょう。

したがって、新しいURLは http：// localhost：1337/localhost：3000/customer になります。

これにより、CORSエラーが削除されます。

クエリはコメントでコメントしてください。

0
Abhishek Sharma