Q&A
> 「サーバーA」にアップロードされているhoge.jsを外部のサーバーから読み込み
そこをどのようにやっているのか具体的に書いてください。
やりたいこと
「サーバーA」にアップロードされているhoge.jsを外部のサーバーから読み込み実行できる状態にしたいです。
意図
いわゆるjsのライブラリやプラグインのように、自身のサーバーにアップしているjsコードを不特定多数のユーザー（サーバー）が読み込み使用できるようにしたいです。
外部サーバーからの読み込み
現時点では以下のように読み込みを行っています。
<script src="https://hoge.com/hoge.js"></script>
※</body>の直前で読み込みをしています。
現状の問題
CORSを設定するため、複数の情報を参考に「サーバーA」のルート直下の.htaccessに以下を記述しました。
※サーバーはエックスサーバーを使用しています。
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin * </IfModule>
上記以外にも、類似の解決策としてネットで調べてヒットする情報に記載の記述は一通り試してみましたが、いずれも上手くいっていません。
「サーバーA」のjsコードを読み込もうとしている外部サイトでは以下のようなエラーが出ています。
Blocked https://hoge.com/hoge.js from asking for credentials because it is a cross-origin request. Origin http://sample.ne.jp is not allowed by Access-Control-Allow-Origin. Failed to load resource: Origin http://sample.ne.jp is not allowed by Access-Control-Allow-Origin. Cross-origin script load denied by Cross-Origin Resource Sharing policy.
※「hoge.com」が「サーバーA」です。
※「sample.ne.jp」が「hoge.com」からjsコードを読み込もうとしている外部サーバーです。
アドバイスいただきたいこと
そもそもサーバーAのjsが読み込めない理由（クロスオリジンだから）は概ね理解しているのですが
その解決方法として用いられているCORSについては初歩的なことしか理解できていない状態です。
上記の記述Header set Access-Control-Allow-Origin *で
すべてのリクエストを許可しているという趣旨はわかるのですが
これを書いてもエラーが改善しない理由や、そもそもhtaccessへの記述の仕方については
不明点が多いです。
お手数をおかけしますが、改善策や解決案をご教示いただけますと幸いです。
追加で行った検証について
改めて以下の内容で検証したところ、一定の条件下でエラーが出る結果となりました。
■前提
・各サーバー内にある「index.php」「hoge.js」の中身は全く同じ
・index.phpの中には<head>などの必要最低限のHTMLとjsを読み込む<script>しか書き込んでいない
・hoge.jsの中にはconsole.log(‘読み込み成功’);というプログラムのみ記述
・検証したブラウザはいずれも最新バージョン
■結果
・Safariでエックスサーバーからjsを読み込む場合のみエラー（エラー内容は前述通り）
・Chromeではいずれの場合も読み込み成功
・さくらサーバーからjsを読み込む場合はいずれのブラウザでも読み込み成功
まずはブラウザで https://hoge.com/hoge.js にアクセスし、F12のデベロッパーツールで意図通り HTTP レスポンスにヘッダがついているかを確認すべきですね。ついてないならやり方がおかしい (エラーになるんだから、ついてない可能性が高い)。
そしてそもそも、その環境で .htaccess 効くんでしょうかとか、mod_headers 使えるんですよかねとか。
ところで * って "*" じゃなくても OK なんでしたっけ。
ご指摘ありがとうございます。
追記させていただきました。
https://hoge.com/hoge.jsへアクセスしたところ、レスポンスヘッダは「なし」となっていました。
（お恥ずかしながら、この場合どのようにすればヘッダをつけられるのかが理解できていません。）
「*」については、「"*"」でも記述を試しましたがダメでした。
「*」での記述例を紹介している記事がいくつかあったので試しにやってみました。
エックスサーバーのお使いのプランで .htaccess 使えるんでしょうか? エックスサーバ提供のドキュメントを見るか、その URL をここに貼るか、サポートに問い合わせてください。
ただしレスポンスヘッダは Content-Type とか Content-Length とかいろいろあるはずので、「なしとなっていました」と言われると、見てるとこ違うのかもとも思いました。
なお、Apache で、.htaccess が効く環境であるならば、やり方としてはあっているのではと思います。
.htaccessは使えます。リダイレクト処理など諸々の対応を独自で追加したりもできているので。
レスポンスヘッダに関しては、SafariのWebインスペクタ[ソース]タブに表示されている[リソース]の欄を確認しておりました。
今一度エックスサーバーのドキュメントを確認してみます。
ここのコメントは回答欄に移しました。
テストしたブラウザは何ですか？
Chrome／Safari（いずれもバージョンは最新）でテストしています。iOS用のSafariやChromeも同様に読み込めません。
Chrome／Safari は windows11 ですか？
いえ、macOS（Monterey）です。
Win系で試した場合はどうなりましたでしょうか？
---
crossorigin 属性についてはすでにお試しになっている、という理解でいいのですね？
COEP や CORP 等の設定もないという理解でいいですか？
どちらも回答は「はい」です。
COEP や CORP も初期値なのですね。なるほど、わかりました。
すみませんが、たぶん私ではお役に立てなさそうです。その hoge.js にアクセスできればなにかわかるかもしれませんが、なんとなく手に負えなさそうな予感がします。
hoge.jsにはいわゆるjsのプラグインによくあるようなWebサイト上の動きを制御するプログラムが入っているだけです。
とんでもありません。
ここまでご協力くださってありがとうございました。
> Webサイト上の動きを制御するプログラムが入っているだけ
いえ、ヘッダを見たいな、と思っただけなのです。わかりにくくてすみません。
追加した図を拝見しましたが、図にある青の矢印の「hoge.js の読み込み」というのは具体的にどうやっているのですか？ PHP のサーバー（ブラウザではなくて）が HTTP 通信で取得するとなると以下の記事に書いてあるようなやり方になると思うのですが？
https://www.twilio.com/blog/5-ways-to-make-http-requests-in-php-jp
<script src="https://hoge.com/hoge.js"></script> をどこにどう設定したのか分かりませんが、何にせよそれでは何ともならないのでは？
上の 68User さんのレスにある「まずはブラウザで https://hoge.com/hoge.js にアクセスし」というのをやってみましたか？ 結果はどうなりましたか？
回答2件
0
自己解決
原因はベーシック認証
エックスサーバー側のhoge.jsのディレクトリにベーシック認証がかかっていたことがエラーの原因でした
（ブラウザがIDとPWを記憶していて認証要求画面が出てこない状態だったため、ベーシック認証がかかっていること自体を完全に見落としていました）
こんなしょうもないことでお時間を消費させてしまって本当に申し訳ないです。
ただ、いただいたアドバイスの中で色々発見はあったので
みなさんにはとても感謝しています。
本当にありがとうございました。
投稿2022/03/28 11:42
総合スコア139
> https://hoge.com/hoge.js にブラウザで直接アクセスすると、jsのプログラムがブラウザ上に表示されます。
という話だったはずですが？ 何なの全く・・・
申し訳ありません。自分にもわかりません。
ただ基本的に事実しか述べていませんので何卒ご了承ください。
SafariはBASIC認証で、あのエラーメッセージを出すんですね。勉強になりましたが、Webkitしっかりしろと言いたい。
basic 認証がかかっているならアクセスするときに必ず認証を通す操作を行っているはずだから知らなかったなんてことはないと思うのですけど？ 最初の回答で「js ファイルに匿名アクセスが許可されているか否か」と書いた時に気が付くと思うのですけど・・・
検証パターン A で Chrome は OK だったのは Chrome は basic 認証を通したあとブラウザは立ち上げたまま検証したということですか？ でなければ、js ファイルは読んでこれないはずですけど・・・ SUCCESS って何を根拠にそう判定したんですか？ それも解せないです。
0
外部サーバーからの読み込み
現時点では以下のように読み込みを行っています。
<script src="https://hoge.com/hoge.js"></script>
それで「外部サーバーから」というのが分からないのですけど？
「sample.ne.jp」というサーバーからブラウザに送られてきた html ソースに <script src="https://hoge.com/hoge.js"></script> が含まれていて、ブラウザがそれを見て指定された「hoge.com」の場所から js ファイルを読むということならその js ファイルに匿名アクセスが許可されているか否かの話で CORS とか関係ないはずですけど。
CDN とか JSONP って知ってますか？ クロスドメインでも CORS とかなしで取得できるのはご存じですよね。
【追記】
エラーメッセージ "blocked from asking for credentials because it is a cross-origin request" でググってみると、特定の設定＆特定の環境のようですが同じエラーが出たという話があり、script タグに crossorigin 属性を追加することで解決できたそうです。試してみてはいかがですか？
type="module"がsafariで上手く読み込めなかった時の対応
https://qiita.com/shimooon/items/bd404af8107481e526af
上の記事では crossorigin="use-credentials" にしたとのことですが、Access-Control-Allow-Origin: * を返すように設定したのであれば crossorigin="anonymous" で試してみてください。
crossorigin="use-credentials" にすると要求の credential mode が 'include' になり、そのモードでは Access-Control-Allow-Origin にワイルドカード '*' は許されてないので CORS ポリシーによりブロックされスクリプトは読み込まれませんので。
【追記２】
下のコメント欄の 2022/03/28 17:30 の私のコメントで「普通はこうするという図を回答欄に追記しておきます」と書いた件です。CDN から取得する場合はこういう感じになります。アクセス権の問題が無くて、上の【追記】に書いたような特別なケースでなけれれば CORS とか関係なくブラウザは js ファイルを取得できます。
質問者さんの場合はこれとは違うのですか？ 違う場合はどのように違うのか説明願います。
投稿2022/03/27 09:15
編集2022/03/28 08:39退会済みユーザー
総合スコア0
CDNやJSONPの存在自体は知っています。
ただ、JSONPについてはクロスドメインにおける抜け道的な手法だという情報をいくつか目にしたので正攻法ではないと認識していました。
CDNについては、理想がjQueryやよくあるプラグインのようにCDNのアドレスで読み込みできるようにすることなので今並行してやり方を調べていますが、どのサービスを使うのが適切なのか、どういう手順で何をすればできるのかがわかっていない状態です。
やや的外れな質問だったようで申し訳ありません。
ただ、それがわからないから質問させていただいている状態なのでご容赦いただけますと幸いです。
※「jsファイルに匿名アクセスを許可させる」ということが具体的にどういった対応なのか今の私には理解できていません。
> CDNについては、理想がjQueryやよくあるプラグインのようにCDNのアドレスで読み込みできるようにすることなので
いや、そうじゃなくて、例えば「sample.ne.jp」というサーバーからブラウザに送られてきた html ソースに、
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
となっていてもその js ファイルは取得できますよね。それがクロスドメインになっているということが分かりませんか？
追記およびアドバイスありがとうございます。
ご提示いただいた記事もすでに拝見させていただいており、
追加でアドバイスいただいた内容も含め実行していますが状況に変化はありません。
現在の状態をわかりやすいように画像にまとめましたのでご参考にしていただけると幸いです。
>それがクロスドメインになっているということが分かりませんか？
わかります。
が、上記jqueryの読み込みは可能で自身の方はエラーになっている原因や双方の違いはよくわかりません。
理解が乏しく申し訳ないです。
質問に追加された図を拝見しましたが、さくらサーバーにある PHP アプリから（ブラウザからではなくて）、エックスサーバーで運用している Web サイトの https://hoge.com/hoge.js というリソースを HTTP 通信で取得するという話ですか？
そうであれば、さくらサーバーにある PHP アプリから <script src="https://hoge.com/hoge.js"></script> で取れるなんてことはないと思うのですが？
さくらサーバーから <script src="https://hoge.com/hoge.js"></script> を含んだ html ソースをブラウザに送って、ブラウザがその html ソースを受け取ってからその script タグに従って直接エックスサーバーで運用している Web サイトの https://hoge.com/hoge.js に要求をかけて js ファイルを取得するということにしないとダメかと思います。
すみません。図が適切ではありませんでした。
さくらサーバーから返されたファイルをブラウザで展開（ブラウザがhoge.jsを読む）するということを意図しています。
よくWebサイトでjQueryなどのプラグインを読み込みますが、やろうとしていることはそれと全く同じです。
また、上記でいただいている別の質問ですが、
https://hoge.com/hoge.jsにブラウザで直接アクセスすると、jsのプログラムがブラウザ上に表示されます。
> 図が適切ではありませんでした。
正しく直していただけませんか？
> https://hoge.com/hoge.jsにブラウザで直接アクセスすると、jsのプログラムがブラウザ上に表示されます。
であればアクセス権の問題はなさそうですので、さくらサーバーのレスポンスの index.php の html ソースの中に <script src="https://hoge.com/hoge.js"></script> があればブラウザからエックスサーバーのその URL にアクセスに行って js ファイルを取得できるはずですけど？ 上の回答に書いたように CORS は関係ないはず。追記で書いたような特殊なケースはあるようですが、エックスサーバーを Access-Control-Allow-Origin: * を返すように設定したのであれば crossorigin="anonymous" で取得できると思いますけど。
普通はこうするという図を回答欄に追記しておきます。
【追記２】にご記載いただいている通りの内容で読み込みを行っています。
いわゆる「普通のやり方」で読み込んでいるつもりですので、特別なことをしようとしている意図はありません。
各ファイルの内容を最大限シンプルな内容にして、改めて検証を行ってみたところ
エックサーバーにアップされているjsをSafariで読み込む場合でエラーが発生することがわかりました。
さくらサーバーにアップされているjsはSafariでも問題なく読み込めました。
Chromeではいずれの場合も読み込みができましたが、昨日の段階ではChromeでも同様のエラーを確認しているため、自身の中ではまだ「Chromeは大丈夫」という結論には至っていません。
サーバー側の問題なのか、Safariの問題なのか、双方の問題なのか、さらによくわからなくなってきました。
回答の【追記】に書いてある crossorigin="anonymous" は試したのですか？ 応答ヘッダには Access-Control-Allow-Origin: * が含まれていますか？ （Header set Access-Control-Allow-Origin * でそうなるのですかね？）
あなたの回答
tips
プレビュー
