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

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

ここで、ajaxリクエストを実行しようとすると、次のエラーが発生します。

XMLHttpRequestを読み込めませんhttp://www.example.com/login.php。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。http://example.comしたがって、オリジン ' 'はアクセスを許可されていません。

メソッドを使用する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。

エラーが発生する理由：

JavaScriptコードがによって制限されている同一生成元ポリシーのページから、意味www.example.com、あなただけ（AJAX）要求に位置サービスを行うことができます正確に同じドメイン、その場合には、正確にwww.example.com（ない example.com -なしwww-またはwhatever.example.com）。

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

非常に似ていますが、同じドメインではありません。また、それらが同じドメイン上にない場合、リクエストは、ターゲットのレスポーズにAccess-Control-Allow-Originヘッダーが含まれている場合にのみ成功します。

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

解決：

言ったように、オリジン（JavaScriptのあるページがある）とターゲット（JavaScriptが到達しようとしている）ドメインは正確に同じでなければなりません。

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

より一般的な注意：

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

.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>

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

要求されたリソースに「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));

同じクエリを実行しているだけですが、サーバー側で実行すると問題なく動作するはずです。

これは、phpページ「login.php」の最初に追加する必要があります。

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

オプションメソッドの応答にヘッダーのキー/値を配置する必要があります。たとえば、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");
    }



}

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

Access-Control-Allow-Credentials：true

Access-Control-Allow-Origin：*

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

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

ここにリンク：http : //docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

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

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

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

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}]]

リクエストヘッダーを設定するために、JavaScriptのXMLHTTPREQUESTで使用される関数を見つけてください。

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

リファレンス：https : //developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader