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

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

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

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

.htaccess

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

解決済

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

Ashi
Ashi

総合スコア134

JavaScript

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

.htaccess

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

2回答

0評価

6クリップ

926閲覧

投稿2022/03/27 07:31

編集2022/03/28 23:02

やりたいこと

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

イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

SurferOnWww

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インスペクタ[ソース]タブに表示されている[リソース]の欄を確認しておりました。 今一度エックスサーバーのドキュメントを確認してみます。
SurferOnWww

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サイト上の動きを制御するプログラムが入っているだけ いえ、ヘッダを見たいな、と思っただけなのです。わかりにくくてすみません。
SurferOnWww

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 にアクセスし」というのをやってみましたか? 結果はどうなりましたか?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

.htaccess

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