web-dev-qa-db-ja.com

ngrokのCORSヘッダーを構成する

私はローカルWebサーバーを実行しています。これは、ngrokサーバーへのXHR要求を実行し、PCからも実行します。

XMLHttpRequest cannot load http://foo.ngrok.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access。

Ngrok FAQはCORSヘッダーについて言及しているようですが、基本的な認証に関連しているだけです-ヘッダーの設定方法については言及していないため、アプリを開発中にテストできます。

ローカルホストからのロード要求を許可するようにngrokのCORSオプションを変更するにはどうすればよいですか？

ngrok
17
wildeyes

今日私はこの問題を偶然見つけましたが、ngrokを起動し、-Host-headerフラグを含めることで問題を解決することができました。

ngrok http -Host-header=rewrite 3000

ドキュメントから：

-Host-headerスイッチを使用して、着信HTTP要求を書き換えます。

Rewriteが指定されている場合、Hostヘッダーは転送アドレスのホスト名部分と一致するように書き換えられます。

7
Dave Kiss

まず、ngrokは単なるトンネルでありサーバーではないため、ngrokでCORSヘッダーを構成することはまったく不可能です。したがって、あらゆる種類のCORS構成をサーバーレベルで行う必要があります。

たとえば、nginxサーバーを使用している場合は、nginx confファイルで次のようにヘッダーを構成する必要があります。

location / {
    /*some default configuration here*/
    add_header 'Access-Control-Allow-Origin' '*';
}

このヘッダーを追加することで、ヘッダーの値が「*」であるため、アドレスへのクロスOriginアクセスが任意のアドレスから許可されることになります。値を置き換えることにより、アドレスへのアクセスが許可される特定のアドレスを指定することもできます。

5
Sidharth Chhawchharia