Apacheでオリジン間リソース共有 (CORS)を利用して、プリフライト・リクエスト(preflight request)を実行せずにアクセスしたい

実現したいこと

Apacheでオリジン間リソース共有 (CORS)を利用して、プリフライト・リクエスト(preflight request)を実行せずにアクセスしたいです。
社内システム(httpサーバー)　→　Apacheのlocalhostの単純なphpファイルに対してGETアクセスし、
エクスプローラーが実行されるようにしています。

下記の設定ではプリフライト・リクエストが発生するので、2回実行されて困っています。(エクスプローラーが2回開くということ)

セキュリティ上　仕方がないことですが、それを回避する方法がないか調べています。

(試したこと)
①axiosのHeaderから"withCredentials": trueを除くと、GETアクセスはできるのですが、
プリフライト・リクエストは発生せず、1回実行します。　しかし、Google Chromeのコンソールに警告が出ます。

②axiosのHeaderに"withCredentials": trueをつけても、GETアクセスはできるのですが、
プリフライト・リクエストで2回実行してしまいます。　Google Chromeのコンソールには警告が出ないです。

(調べたこと)
https://qiita.com/nnishimura/items/1f156f05b26a5bce3672
単純リクエストであればプリフライト・リクエストが発生しないということ。
withCredentials": trueがあると単純リクエストにならないみたいです。
除くと単純リクエストになりますし、1回のみ実行になりますが、警告が出てしまうところが気になります。

わかるかたいらっしゃいましたらお願いします。

現在のapacheの設定と、実行するコード

apacheの設定

httpd.conf
1<Directory "C:/xampp/htdocs">
2    # ...
3    
4    # 開発環境のアドレス
5    Header set Access-Control-Allow-Origin "https://localhost:7096"
6
7    Header set Access-Control-Allow-Methods "GET, POST, HEAD, OPTIONS"
8    Header set Access-Control-Allow-Headers "Origin, withcredentials"
9    Header set Access-Control-Allow-Credentials "true"
10</Directory>

実行するコード(localhostに対してgetアクセスしています。localhostはapacheの80ポートを利用)

index.js
1axios({
2      method: "get",
3      url: "http://localhost",
4      headers: {
5             "Content-Type": "application/x-www-form-urlencoded;"
6
7             // これをつけると警告はなくなるが、preflight requestが発生する
8             "withCredentials": true
9       },
10       params: { value: "GETで渡すパラメーター" }
11}).catch((response) => {
12    console.log("ng")
13});

Google Chrome警告内容

Access to XMLHttpRequest at ...
from origin 'https://localhost:7096' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:7096' that is not equal to the supplied origin.

パケットキャプチャソフトの結果
左から1回目、2回目

maisumakun

2022/10/24 07:44

> しかし、Google Chromeのコンソールに警告が出ます。警告内容はどのようなものですか？

pom12345

2022/10/24 07:56 編集

失礼しました。*の時は出ていませんでした。httpd.confにIPアドレス(https://localhost:7096)を指定したところ、下記が出ています。 Access to XMLHttpRequest at ... from origin 'https://localhost:7096' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:7096' that is not equal to the supplied origin. 開発環境 https、本番環境 httpだったので、本番環境の検証はまだできていません。 ※本来は本番環境でもhttpsを使わないといけないですが...

行動規範の内容に同意します

回答2件

ベストアンサー

単にAccess-Control-Allow-Originにhttps://localhost:7096が指定されているからではないでしょうか？

投稿2022/10/24 08:39

a.‫com

総合スコア913

pom12345

2022/10/24 09:05 編集

教えて頂きありがとうございます。 httpsではなく、httpで合わせたところ、axiosに"withCredentials": trueをつけなくても、GETアクセスでき、警告も発生しないようになりました。 CORSを利用するときは合わせないといけないですね。実際は本番環境でもhttpsにする必要はありますが。

行動規範の内容に同意します

除くと単純リクエストになりますし、1回のみ実行になりますが、警告が出てしまうところが気になります。

はい、これはプレフライトリクエストだけ送られて、そこでヘッダーが合わないから拒否される状態です。

「単にGETリクエストだけ送って、結果は取れなくていい」のであれば、CORSの影響がない<img>や<script>のsrcにURLを指定する、という手法も考えられます。

投稿2022/10/24 08:02

maisumakun

総合スコア146543

maisumakun

2022/10/24 08:03

もっとも、なにかアクションするためのURLをGETで構成することそのものが、あまりお薦めはできません。

pom12345

2022/10/24 08:08 編集

現在はaxiosでGETリクエストをしていましたが、<img>や<script>のsrcにURLを指定するという手法はどのような方法でしょうか？ scriptでlocation.hrefぐらいしか思いつきませんが、target blankでタブが開いてしまいそうです。 GETリクエストだけ送り、結果が取れなくて大丈夫ですが。GETはパラメータが見えてしまいますのでセキュリティ的に良くないかもしれませんが。 POSTでもよいですが。

maisumakun

2022/10/24 08:09

> <img>や<script>のsrcにURLを指定するという手法はどのような方法でしょうか？書いてのとおりです。srcにURLを指定すれば、そのURLから画像やJavaScriptを取得するためのGETリクエストが行われます。 > GETはパラメータが見えてしまいますのでセキュリティ的に良くないかもしれませんが。どうせJavaScriptからのリクエストは全部ブラウザ内で何をやっているかわかってしまうので、このような場合にはGETでもPOSTでもセキュリティ的な意味は持ちません。

pom12345

2022/10/24 08:20 編集

GETでもPOSTでも同じなんですね。単純な考えで　javascriptでcreateElementでimgを作って、srcを指定して、GETアクセスが発生したら、すぐ破棄するようなことが、もしかしたらできるかもしれないとは考えました。セキュリティ的にはまずいのはわかりましたが、localhostに対して簡易的なことをしたいため、限定的ではありますが(phpファイルではOSコマンドインジェクション対策は実施済み)

行動規範の内容に同意します

あなたの回答