質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

.htaccess

Apacheウェブサーバーにおいて、ディレクトリ単位で設置及び設定を行う設定ファイルを指します。

Q&A

解決済

2回答

6440閲覧

CORSの設定をしてもエラーが直らない/やり方が適切なのかがわからない

Ashi

総合スコア139

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

.htaccess

Apacheウェブサーバーにおいて、ディレクトリ単位で設置及び設定を行う設定ファイルを指します。

0グッド

6クリップ

投稿2022/03/27 07:31

編集2022/03/28 09:56

やりたいこと

「サーバー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を読み込む場合はいずれのブラウザでも読み込み成功
イメージ説明

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/03/27 07:39

> 「サーバーA」にアップロードされているhoge.jsを外部のサーバーから読み込み そこをどのようにやっているのか具体的に書いてください。
68user

2022/03/27 07:43

まずはブラウザで https://hoge.com/hoge.js にアクセスし、F12のデベロッパーツールで意図通り HTTP レスポンスにヘッダがついているかを確認すべきですね。ついてないならやり方がおかしい (エラーになるんだから、ついてない可能性が高い)。 そしてそもそも、その環境で .htaccess 効くんでしょうかとか、mod_headers 使えるんですよかねとか。 ところで * って "*" じゃなくても OK なんでしたっけ。
Ashi

2022/03/27 07:43

ご指摘ありがとうございます。 追記させていただきました。
68user

2022/03/27 07:53

エックスサーバーのお使いのプランで .htaccess 使えるんでしょうか? エックスサーバ提供のドキュメントを見るか、その URL をここに貼るか、サポートに問い合わせてください。 ただしレスポンスヘッダは Content-Type とか Content-Length とかいろいろあるはずので、「なしとなっていました」と言われると、見てるとこ違うのかもとも思いました。
68user

2022/03/27 07:54

なお、Apache で、.htaccess が効く環境であるならば、やり方としてはあっているのではと思います。
Ashi

2022/03/27 07:57

.htaccessは使えます。リダイレクト処理など諸々の対応を独自で追加したりもできているので。 レスポンスヘッダに関しては、SafariのWebインスペクタ[ソース]タブに表示されている[リソース]の欄を確認しておりました。 今一度エックスサーバーのドキュメントを確認してみます。
退会済みユーザー

退会済みユーザー

2022/03/27 09:17 編集

ここのコメントは回答欄に移しました。
Lhankor_Mhy

2022/03/28 01:53

テストしたブラウザは何ですか?
Ashi

2022/03/28 06:45

Chrome/Safari(いずれもバージョンは最新)でテストしています。iOS用のSafariやChromeも同様に読み込めません。
Lhankor_Mhy

2022/03/28 06:52

Chrome/Safari は windows11 ですか?
Ashi

2022/03/28 06:53

いえ、macOS(Monterey)です。
Lhankor_Mhy

2022/03/28 07:12 編集

Win系で試した場合はどうなりましたでしょうか? --- crossorigin 属性についてはすでにお試しになっている、という理解でいいのですね? COEP や CORP 等の設定もないという理解でいいですか?
Ashi

2022/03/28 07:16

どちらも回答は「はい」です。
Lhankor_Mhy

2022/03/28 07:21

COEP や CORP も初期値なのですね。なるほど、わかりました。 すみませんが、たぶん私ではお役に立てなさそうです。その hoge.js にアクセスできればなにかわかるかもしれませんが、なんとなく手に負えなさそうな予感がします。
Ashi

2022/03/28 07:28

hoge.jsにはいわゆるjsのプラグインによくあるようなWebサイト上の動きを制御するプログラムが入っているだけです。 とんでもありません。 ここまでご協力くださってありがとうございました。
Lhankor_Mhy

2022/03/28 07:42

> Webサイト上の動きを制御するプログラムが入っているだけ いえ、ヘッダを見たいな、と思っただけなのです。わかりにくくてすみません。
退会済みユーザー

退会済みユーザー

2022/03/28 07:44 編集

追加した図を拝見しましたが、図にある青の矢印の「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 にアクセスし」というのをやってみましたか? 結果はどうなりましたか?
guest

回答2

0

自己解決

原因はベーシック認証

エックスサーバー側のhoge.jsのディレクトリにベーシック認証がかかっていたことがエラーの原因でした

(ブラウザがIDとPWを記憶していて認証要求画面が出てこない状態だったため、ベーシック認証がかかっていること自体を完全に見落としていました)

こんなしょうもないことでお時間を消費させてしまって本当に申し訳ないです。

ただ、いただいたアドバイスの中で色々発見はあったので
みなさんにはとても感謝しています。

本当にありがとうございました。

投稿2022/03/28 11:42

Ashi

総合スコア139

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/03/28 12:04

> https://hoge.com/hoge.js にブラウザで直接アクセスすると、jsのプログラムがブラウザ上に表示されます。 という話だったはずですが? 何なの全く・・・
Ashi

2022/03/28 13:10 編集

申し訳ありません。自分にもわかりません。 ただ基本的に事実しか述べていませんので何卒ご了承ください。
Lhankor_Mhy

2022/03/28 13:18

SafariはBASIC認証で、あのエラーメッセージを出すんですね。勉強になりましたが、Webkitしっかりしろと言いたい。
退会済みユーザー

退会済みユーザー

2022/03/28 14:02 編集

basic 認証がかかっているならアクセスするときに必ず認証を通す操作を行っているはずだから知らなかったなんてことはないと思うのですけど? 最初の回答で「js ファイルに匿名アクセスが許可されているか否か」と書いた時に気が付くと思うのですけど・・・ 検証パターン A で Chrome は OK だったのは Chrome は basic 認証を通したあとブラウザは立ち上げたまま検証したということですか? でなければ、js ファイルは読んでこれないはずですけど・・・ SUCCESS って何を根拠にそう判定したんですか? それも解せないです。
guest

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 ポリシーによりブロックされスクリプトは読み込まれませんので。


【追記2】

下のコメント欄の 2022/03/28 17:30 の私のコメントで「普通はこうするという図を回答欄に追記しておきます」と書いた件です。CDN から取得する場合はこういう感じになります。アクセス権の問題が無くて、上の【追記】に書いたような特別なケースでなけれれば CORS とか関係なくブラウザは js ファイルを取得できます。

イメージ説明

質問者さんの場合はこれとは違うのですか? 違う場合はどのように違うのか説明願います。

投稿2022/03/27 09:15

編集2022/03/28 08:39
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ashi

2022/03/27 09:23

CDNやJSONPの存在自体は知っています。 ただ、JSONPについてはクロスドメインにおける抜け道的な手法だという情報をいくつか目にしたので正攻法ではないと認識していました。 CDNについては、理想がjQueryやよくあるプラグインのようにCDNのアドレスで読み込みできるようにすることなので今並行してやり方を調べていますが、どのサービスを使うのが適切なのか、どういう手順で何をすればできるのかがわかっていない状態です。 やや的外れな質問だったようで申し訳ありません。 ただ、それがわからないから質問させていただいている状態なのでご容赦いただけますと幸いです。 ※「jsファイルに匿名アクセスを許可させる」ということが具体的にどういった対応なのか今の私には理解できていません。
退会済みユーザー

退会済みユーザー

2022/03/27 10:43

> CDNについては、理想がjQueryやよくあるプラグインのようにCDNのアドレスで読み込みできるようにすることなので いや、そうじゃなくて、例えば「sample.ne.jp」というサーバーからブラウザに送られてきた html ソースに、 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> となっていてもその js ファイルは取得できますよね。それがクロスドメインになっているということが分かりませんか?
Ashi

2022/03/28 06:43 編集

追記およびアドバイスありがとうございます。 ご提示いただいた記事もすでに拝見させていただいており、 追加でアドバイスいただいた内容も含め実行していますが状況に変化はありません。 現在の状態をわかりやすいように画像にまとめましたのでご参考にしていただけると幸いです。 >それがクロスドメインになっているということが分かりませんか? わかります。 が、上記jqueryの読み込みは可能で自身の方はエラーになっている原因や双方の違いはよくわかりません。 理解が乏しく申し訳ないです。
退会済みユーザー

退会済みユーザー

2022/03/28 07:26

質問に追加された図を拝見しましたが、さくらサーバーにある 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 ファイルを取得するということにしないとダメかと思います。
Ashi

2022/03/28 07:52

すみません。図が適切ではありませんでした。 さくらサーバーから返されたファイルをブラウザで展開(ブラウザがhoge.jsを読む)するということを意図しています。 よくWebサイトでjQueryなどのプラグインを読み込みますが、やろうとしていることはそれと全く同じです。 また、上記でいただいている別の質問ですが、 https://hoge.com/hoge.jsにブラウザで直接アクセスすると、jsのプログラムがブラウザ上に表示されます。
退会済みユーザー

退会済みユーザー

2022/03/28 08:10

> 図が適切ではありませんでした。 正しく直していただけませんか? > 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" で取得できると思いますけど。
退会済みユーザー

退会済みユーザー

2022/03/28 08:30

普通はこうするという図を回答欄に追記しておきます。
Ashi

2022/03/28 10:00

【追記2】にご記載いただいている通りの内容で読み込みを行っています。 いわゆる「普通のやり方」で読み込んでいるつもりですので、特別なことをしようとしている意図はありません。 各ファイルの内容を最大限シンプルな内容にして、改めて検証を行ってみたところ エックサーバーにアップされているjsをSafariで読み込む場合でエラーが発生することがわかりました。 さくらサーバーにアップされているjsはSafariでも問題なく読み込めました。 Chromeではいずれの場合も読み込みができましたが、昨日の段階ではChromeでも同様のエラーを確認しているため、自身の中ではまだ「Chromeは大丈夫」という結論には至っていません。 サーバー側の問題なのか、Safariの問題なのか、双方の問題なのか、さらによくわからなくなってきました。
退会済みユーザー

退会済みユーザー

2022/03/28 10:54

回答の【追記】に書いてある crossorigin="anonymous" は試したのですか? 応答ヘッダには Access-Control-Allow-Origin: * が含まれていますか? (Header set Access-Control-Allow-Origin * でそうなるのですかね?)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問