web-dev-qa-db-ja.com

Auth0とReact）に関するCORSの問題

現在、NodeJSにAuth0を実装しようとしています+ React App。このチュートリアルは非常に便利ですが、大きな問題が1つあります。Auth0を介してログイン/登録しようとすると、次のようになります。

XMLHttpRequestを読み込めません https://XYZ.eu.auth0.com/usernamepassword/login 。プリフライト要求への応答がアクセス制御チェックに合格しません：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：30 'はアクセスを許可されていません。プリフライト要求への応答がアクセス制御チェックに合格しません：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：30 'はアクセスを許可されていません。

だから私はそれが何を意味するのか大まかに理解しています。しかし、このリクエストをAuth0に許可するために必要なオプションをどこに設定すればよいかわかりません。サーバー側では？ブラウザコードでは？

宜しくお願いします

編集：RodrigoLópezDatoが指摘したように、私はここに私のアプリでOriginsを書くことができます： https://manage.auth0.com/#/applications

ローカルで開発しているとき、そこに何を置くべきですか？私のIP？

node.jsreactjscorsauth0
10
MoeSattler

ローカルで開発している場合は、リダイレクト先のURLを入力できます。たとえば、ローカルホストのポート4000で実行していて、/callbackというルートにリダイレクトする場合は、次のように入力できます。

http://localhost:4000/callback

その分野で。

10
Kassandra Perch

Auth0は、アプリケーションで許可されているオリジンとコールバックURLを知る必要があります。ダッシュボードのアプリケーションの設定で構成できます： https://manage.auth0.com/#/applications

7
Rodrigo López Dato

Node.jsアプリを構築しているとおっしゃっていたので、サーバー側でさらに詳しく説明します。 Expressも使用していると思います。 CORSリクエストを処理するには、次の操作を実行できます。

Expressサーバーファイルで、ローカルホストをクライアント側以外のものに設定できますReactアプリはlocalhost：3000で実行されている可能性が高いです。

var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);

次に、cors npmパッケージをインストールし、メインのExpressファイルで初期化します。

var app = express();
app.use(cors());

次に、クライアント側のReact package.jsonファイルにプロキシを設定するだけです。

  },
  "proxy": "http://localhost:5000"
}

次に、node.js/expressサーバーとReactアプリの両方を同時に実行し、Expressサーバーを使用してクライアントを介してリクエストを行うことができますReact withプロキシ。

うまくいけば、これが役立つでしょう。

1
iqbal125