web-dev-qa-db-ja.com

要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。オリジン '...'はアクセスが許可されていません

私はURLを書き換えるために.htaccessを使っています、そしてそれを機能させるために私はhtmlベースタグを使いました。

さて、私がajaxリクエストを行おうとすると、次のエラーが出ます。

XMLHttpRequestは http://www.wordicious.com/login.php をロードできません。要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。オリジン ' http://wordicious.com 'はアクセスを許可されていません。

javascriptjqueryajaxcorsxmlhttprequest
134
Th3lmuu90

addHeaderメソッドの代わりにsetHeaderを使用します。

response.addHeader("Access-Control-Allow-Origin", "*");

*上記の行ではaccess to all domainsが許可されます。

access to specific domain onlyを許可する場合

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

blog post を確認してください。

170
Jay Patel

エラーが発生する理由：

JavaScriptコードは same-Origin policy によって制限されます。つまり、www.example.comのページから、exactlyにあるサービスに対してのみ（AJAX）リクエストを行うことができます。その場合、同じドメイン、正確にwww.example.com（notexample.com-wwwなし-またはwhatever.example.com）。

あなたの場合、Ajaxコードはhttp://wordicious.comにあるページからhttp://www.wordicious.comのサービスに到達しようとしています。

非常によく似ていますが、それらはnot同じドメインです。そして、それらが同じドメインにない場合、ターゲットのresposeにAccess-Control-Allow-Originヘッダーが含まれている場合にのみ、リクエストは成功します。

http://wordicious.comのページ/サービスがこのようなヘッダーを表示するように構成されていないため、そのエラーメッセージが表示されます。

溶液：

前述のように、Origin（JavaScriptのページがある場所）とターゲット（JavaScriptが到達しようとしている）ドメインはexactと同じでなければなりません。

あなたのケースはタイプミスのようです。 http://wordicious.comとhttp://www.wordicious.comは実際には同じサーバー/ドメインのように見えます。そのため、修正するには、ターゲットとOriginを等しく入力します。Ajaxコードリクエストページ/サービスをhttp://www.wordicious.com]ではなくhttp://wordicious.comにします。 （ドメインなしで、'/login.php'のようにターゲットURLを相対的に配置することもできます）。



より一般的な注意事項：

問題がこの質問のようなタイプミスではない場合、解決策はターゲットドメインにAccess-Control-Allow-Originを追加になります。それを追加することは、もちろん、そのアドレスの背後にあるサーバー/言語に依存します。時々、ツールの構成変数がトリックを行います。それ以外の場合は、コードを使用して自分でヘッダーを追加する必要があります。

145
acdcjunior

.NETサーバーの場合は、次に示すようにweb.configでこれを構成できます。

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

たとえば、サーバードメインが http://live.makemypublication.com でクライアントが http://www.makemypublication.com の場合は、次のようにサーバーのweb.configに設定します

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>
61
Naga

ブラウザからこのエラーメッセージが表示されたら：

要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。オリジン '…'はアクセスが許可されていません

あなたがコントロールできないリモートサーバーへのAjax POST/GETリクエストをやろうとしているとき、この簡単な修正を忘れてください：

<?php header('Access-Control-Allow-Origin: *'); ?>

特にAjaxリクエストにJavaScriptを使用するだけの場合は、本当に必要なことは、クエリを受け取ってリモートサーバーに送信する内部プロキシです。

まずJavaScriptで、自分のサーバーにAjax呼び出しを行います。

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

次に、proxy.phpという単純なPHPファイルを作成して、POSTデータをラップし、それらをパラメータとしてリモートURLサーバーに追加します。 Expedia Hotelの検索APIを使用してこの問題を回避する方法の例を示します。

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

することによって：

 echo json_encode(file_get_contents($url));

あなたはただ同じ問い合わせをしていますが、サーバー側でそれ以降は、それはうまくいくはずです。

21
Nizar B.

あなたはあなたのphpページ "login.php"の始めにこれを追加する必要があります。

<?php header('Access-Control-Allow-Origin: *'); ?>
9
shady sherif

あなたはoptionsメソッドのレスポンスにヘッダのキー/値を入れる必要があります。たとえば、 http://mydomain.com/myresource にリソースがある場合は、サーバーコードで次のように記述します。

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}
7
i-systech.com

この問題を回避するには、「ソース」ホストで実行されているターゲットサーバーに転送するリバースプロキシを使用します（Fiddlerなど）。

こちらからリンクしてください： http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

またはApacheリバースプロキシ...

3
hzrari

以下の追加パラメータを追加して、基本的にAPIヘッダーの応答を変更します。

Access-Control-Allow-Credentials：true

アクセス制御許可起点：*

しかしセキュリティに関してはこれは良い解決策ではありません

3
Piusha

これをあなたに追加しますPHPファイルまたはメインコントローラ

header("Access-Control-Allow-Origin: http://localhost:9000");
1
Sam

Httpd.confの以下のエントリで解決

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_Origin:%{HTTP:Origin}]]
1
Sandeep540

Angularを使用してDjango RESTバックエンドにレコードをポストすると、この問題に遭遇します。時々、この問題のための特定の理由がありません。 Djangoのエラーメッセージをよく確認してください。解決策が見つかるでしょう。

0
Belter