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

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

ただいまの
回答率

90.23%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 8,440

imamura

score 129

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

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

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT');
header('Access-Control-Max-Age: 3600');
header('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呼び出し部分です。

function fetchAPI(action) {
    if (action === 'createUser') {
        var request_url = api_url + "createUser";
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    if (JSON) {
                        if (navigator.userAgent.indexOf('Trident') !== -1) {
                            var response = JSON.parse(xhr.response);
                        } else {
                            var response = xhr.response;
                        }
                    }
                    setUserName(response);
                    setCookie('user_name', response.data.user_name);
                } else {
                    console.log("status=" + xhr.status);
                }
            }
        };
        xhr.open('GET', request_url);
        xhr.responseType = "json";
        xhr.send();
    }
}

しかしながら、エラーとなってしまいます。
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();で処理を終了させています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/31 16:18

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

    キャンセル

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

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる