Q&A
CORSのエラーを解決するために下記コードのようなものを使ってみたのですが画像のエラーが出てページが表示されなくなります。
この問題を解決するために必要なことが分かる方がいらっしゃいましたら教えてほしいです。
必要な情報がありましたら対応させていただきますのでお申し付けください。
const createProxyMiddleware = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:9000",
secure: false,
})
);
};
バックエンドが CORS に対応してないので、
フロントエンド ⇔ プロキシ (HPM) ⇔ バックエンド
という構成にして対応しようとしたと理解してます。
そうであれば、プロキシなしで試した時はどうなりますか。バックエンドが動いていて、フロントエンドから正しく要求が出ていれば質問の画像のようなエラーにはならず、要求はバックエンドに届いて応答は返ってくるはすですが、そうなりますか？ （応答が返ってきても CORS のエラーが出てバックエンドからのデータは取得できないという結果になるはずですが）
【追記】
もし、プロキシサーバーを使わない場合でも質問の画像のようなエラーになるということであれば、プロキシ以前の問題がある（フロントエンド、バックエンドが動いてない？）ということになると思いますので、まずそこを何とかしてください。
フロントエンドもバックエンドもちゃんと動いていて、問題は CORS 対応だけということであれば、疑わしいのはプロキシの設定ということになると思います。
自分の Windows 10 PC の場合ですが、プロキシの作成に成功すると以下のようなメッセージがコマンドライン上に表示されます。質問者さんの環境ではいかがですか？
上の画像の赤線部分は weatherforecast への要求はプロキシがバックエンドの https://localhost:44353 に要求を出すということを意味しています。フロントエンドは Node.js 開発サーバーで https://localhost:44453 でホストされています。
ちなみに、上の設定を行うスクリプトは以下のようになっています。
const createProxyMiddleware = require('http-proxy-middleware');
const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:35842';
const context = [
"/weatherforecast",
];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context, {
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
@rempei
Questioner
ご回答ありがとうございます。
プロキシなしでは画像のエラーは表示されず、CORSのエラーのみだと思います。
また、私のコマンドライン上にはプロキシ作成の設定をしてもそのような記述はありません。
そもそも私の手順は
frontend/srcにプロキシ作成のファイルをつくりnpm startをしているだけなのですがこれは正しいでしょうか？
プロキシなしでは画像のエラーは表示されず、CORSのエラーのみだと思います。
「思います」では分からないので、ブラウザのディベロッパーツールを開いて Console を見るとか、Fiddler で要求・応答をキャプチャして調べてもらった方がいいと思います。詳しくは以下の記事を見てください。
CORS 非対応の場合のエラーメッセージ
http://surferonwww.info/BlogEngine/post/2024/04/02/error-messages-when-cors-is-not-working-at-server-side.aspx
frontend/srcにプロキシ作成のファイルをつくりnpm startをしているだけなのですがこれは正しいでしょうか？
質問者さんの開発環境が分からない自分にはそこは分かりません。
@rempei
Questioner
プロキシ無しでのエラーは下記です。
Access to XMLHttpRequest at 'http://localhost:9000/api/vital' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Vital.js:58 APIリクエストエラー: AxiosError
fetchData @ Vital.js:58
:9000/api/vital:1
Failed to load resource: net::ERR_FAILED
経験がなくて何と答えればよいのか分からないので、開発環境について何の情報が必要か教えてください
開発環境について何の情報が必要か教えてください
例えば（あくまで例えばですが）、「Windows 10 PC で Visual Studio 2022 の React and ASP.NET Core のテンプレートを使って、ターゲットフレームワーク .NET 8.0 で作成したプロジェクト」というような情報が提供できると、そのフレームワークに詳しい人が閲覧者にいれば、ピンポイントで原因が分かって有用な情報がもらえるかもしれません。
今の質問内容では、質問者さんの PC の OS が何かさえも分からないということを認識しましょう。
@rempei
Questioner
Windows10、Visual Studio1.88.1というところまでは分かりますがそれ以降はどう書いていいか分かりません。
私の方法が正しいか判断するのに他に必要なことがあれば教えてください
Visual Studio ではなくて Visual Studio Code でしょう。まずそこから間違っているし、ここのような文章でやり取りする Q&A サイトで詳しい話を聞いて解決するというのは自分には無理そうです。他の方の回答をお待ちください。
CORSエラーは、
サーバ「よそのネットワークからきてるやつは怪しいので通信しません」
というエラーですね。
これを回避するには、サーバ側に「でもこいつは許可する」と設定する必要があります。
クライアント側でゴニョゴニョするのは根本的な解決法ではないですね。
@rempei
Questioner
ご回答ありがとうございます。
現在、backendはPlayフレームワークを使用しておりバージョンは1.4.3です。
このバージョンでCORSのエラーを解決したいのですが
@CrossOriginやHttpFiltersモジュールではエラーが解決できずプロキシを利用してみたところです。
なにか解決法がありましたら教えていただきたいです。
「playフレームワーク cors」で検索すると公式のドキュメントが見つかりますが、これではだめでしたか？
https://www.playframework.com/documentation/ja/2.4.x/CorsFilter
@rempei
Questioner
これはバージョン2.x以降のやり方なのでだめです
それは残念です。
セキュリティに関わる事項ですので、フレームワークのバージョンアップも十分に検討の価値ありと思いますが、事情がおありなのでしょうね。
良い方法が見つかることをお祈りしております。
