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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2398閲覧

"Access-Control-Allow-Origin:*" 済みだけど クロスドメイン エラーになる

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/01/31 06:43

編集2018/01/31 06:45

サイトAのindex,html内のjavascript から サイトB に設置された自作APIを呼び出しています。

サイトBのヘッダー出力部分は次のようになっています。

php

1header('Access-Control-Allow-Origin: *'); 2header('Access-Control-Allow-Methods: GET, POST, PUT'); 3header('Access-Control-Max-Age: 3600'); 4header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

テストで、サイトBをブラウザで呼び出すと次のようなヘッダー情報が返ってきます。

HTTP/1.1 200 OK Date: Wed, 31 Jan 2018 06:13:55 GMT Server: Apache/2.4.29 X-Powered-By: PHP/5.6.32 Expires: Wed, 11 Jan 1984 05:00:00 GMT Cache-Control: no-cache, must-revalidate, max-age=0 Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Max-Age: 3600 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/json; charset=utf-8

そしてサイトAのJS呼び出し部分です。

javascript

1function fetchAPI(action) { 2 if (action === 'createUser') { 3 var request_url = api_url + "createUser"; 4 var xhr = new XMLHttpRequest(); 5 xhr.onreadystatechange = function() { 6 if (xhr.readyState === 4) { 7 if (xhr.status === 200) { 8 if (JSON) { 9 if (navigator.userAgent.indexOf('Trident') !== -1) { 10 var response = JSON.parse(xhr.response); 11 } else { 12 var response = xhr.response; 13 } 14 } 15 setUserName(response); 16 setCookie('user_name', response.data.user_name); 17 } else { 18 console.log("status=" + xhr.status); 19 } 20 } 21 }; 22 xhr.open('GET', request_url); 23 xhr.responseType = "json"; 24 xhr.send(); 25 } 26}

しかしながら、エラーとなってしまいます。
chrome

Failed to load http://example-b.com/createUser: Redirect from 'http://example-b.com/createUser' to 'http://example-b.com/createUser/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example-a.com' is therefore not allowed access.

safari

Cross-origin redirection to http://example-b.com/createUser/ denied by Cross-Origin Resource Sharing policy: Origin http://example-a.com is not allowed by Access-Control-Allow-Origin.

クロスドメインとして必要な情報は出力されていると思うのですが、なにか足りないものがあるでしょうか?
どうぞよろしくおねがいします。

ps.
特殊な事情としてはWordpressの独自プラグインの一部でAPI機能を実装しています。
このAPI機能部分で問題が発生しています。
Wordpressが何か出力する前にheader,dataを出力をしてexit();で処理を終了させています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

現状、プリフライトが必要なリクエストでリダイレクトを伴うような場合、うまく処理できないとのことです(MDN)。

ただ、今回の場合、http://example-b.com/createUserからhttp://example-b.com/createUser/へのリダイレクトとのことなので、アクセス先をcreateUser/に変えればリダイレクトせずに通せるかもしれません。

投稿2018/01/31 06:56

maisumakun

総合スコア145121

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

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

退会済みユーザー

退会済みユーザー

2018/01/31 07:18

ありがとうございます! URL最後に / を付加することで無事に動きました。 redirectよることが問題とはうっかりしていました。 感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問