XMLHTTPREQUESTエラー：Origin Nullはアクセス制御によって許可されていません

https://stackoverflow.com/questions/3595515

02-10-2019
|

質問

JQueryのAjaxサポートを介してFlickrとPanoramioから画像を引き出すページを開発しています。

Flickr側は正常に動作していますが、私がしようとするとき $.get(url, callback) Panoramioから、Chromeのコンソールにエラーが表示されます。

xmlhttprequestはロードできません http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag = test&offset=0&length=20&callback=processimages&minx=-30&miny=0&maxx=0&maxy=150. 。 Origin Nullは、アクセス制御 - アロリジンによって許可されません。

ブラウザから直接そのURLを照会すると、正常に動作します。何が起こっているのか、これを回避できますか？私は私のクエリを誤って作曲していますか、それともパノラミオが私がやろうとしていることを妨げるためにしていることですか？

Googleは、有用な試合を表示しませんでしたエラーメッセージ.

編集

問題を示すサンプルコードは次のとおりです。

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

あなたはできるオンラインで例を実行します.

編集2

これを助けてくれたダリンに感謝します。 上記のコードが間違っています。 代わりにこれを使用してください：

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

解決

記録のために、私が知る限り、あなたには2つの問題がありました。

あなたはあなたに「jsonp」タイプの仕様を渡していませんでした $.get, 、したがって、通常のxmlhttprequestを使用していました。ただし、ブラウザはCORS（クロスオリジンリソース共有）をサポートして、サーバーがOKEDを使用した場合にクロスドメインXMLHTTPREQUESTを許可しました。それがどこです Access-Control-Allow-Origin ヘッダーが入ってきました。
ファイル：// urlから実行していると言ったと思います。 CORSヘッダーがクロスドメインXHRが大丈夫であることを示す2つの方法があります。 1つは送信することです Access-Control-Allow-Origin: * （これは、あなたがFlickrに到達した場合 $.get, 、彼らはしていたに違いない）一方、もう一方は、 Origin ヘッダ。でも、 file:// URLはヌルを生成します Origin Echo-Backで許可することはできません。

最初は、ダリンが使用するという提案によってラウンドアバウトの方法で解決されました $.getJSON. 。リクエストタイプをデフォルトの「JSON」から「JSONP」に変更するのは少し魔法をかけます。 callback=? URLで。

それは、もはやCORSリクエストを実行しようとしないことで2番目を解決しました file:// URL。

他の人を明確にするために、ここに簡単なトラブルシューティングの指示があります。

JSONPを使用しようとしている場合は、次のいずれかがそうであることを確認してください。
- あなたが使用しています $.get とセット dataType に jsonp.
- あなたが使用しています $.getJSON 含まれています callback=? URLで。
CORS経由でクロスドメインxmlhttprequestを実行しようとしている場合...
1. 経由でテストしていることを確認してください http://. 。経由で実行されているスクリプト file:// CORSのサポートは限られています。
2. ブラウザを確認してください実際にcorsをサポートします. 。（オペラとインターネットエクスプローラーはパーティーに遅れています）

他のヒント

あなたはおそらくあなたの呼ばれるスクリプトにヘッダーを追加する必要があります、ここに私がPHPでやらなければならなかったことがあります：

header('Access-Control-Allow-Origin: *');

詳細 クロスドメインAjax OUサービスWeb （フランス語で）。

簡単なHTMLプロジェクトの場合：

cd project
python -m SimpleHTTPServer 8000

次に、ファイルを閲覧します。

Google Chrome v5.0.375.127で私のために働いています（アラートが得られます）：

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

また、私はあなたに使用することをお勧めします $.getJSON() 代わりに、以前はIE8で動作しないため（少なくとも私のマシンでは）方法：

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

あなたはそれを試すかもしれませんここからオンライン.

アップデート：

あなたがあなたのコードを示したので、私はそれで問題を見ることができます。あなたは匿名関数とインライン関数の両方を持っていますが、両方とも呼び出されます processImages. 。それがJQueryのJSONPサポートの仕組みです。私がどのように定義しているかに注目してください callback=? 匿名関数を使用できるように。もっと読むことができますドキュメントの中でそれについて.

もう1つの発言は、evalを呼び出すべきではないということです。匿名関数に渡されたパラメーターは、jQueryによってすでにJSONに解析されます。

要求されたサーバーがJSONデータ形式をサポートしている限り、JSONP（JSONパディング）インターフェイスを使用します。これにより、プロキシサーバーや派手なヘッダーのものなしで外部ドメイン要求を作成できます。

それはです同じ起源のポリシー, 、JSON-Pインターフェイスまたは同じホストで実行されているプロキシを使用する必要があります。

私たちはそれを経由してそれを管理しました http.conf ファイル（編集されてからHTTPサービスを再起動しました）：

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

の中に Header set Access-Control-Allow-Origin "*", 、正確なURLを配置できます。

ローカルテストを行っている場合、またはようなものからファイルを呼び出している場合 file:// その後、ブラウザのセキュリティを無効にする必要があります。

Mac：open -a Google\ Chrome --args --disable-web-security

私の場合、同じコードがFirefoxで正常に機能しましたが、Google Chromeではうまくいきませんでした。 Google ChromeのJavaScriptコンソールは次のように述べています

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

Ajax URLのWWW部分をドロップして、Origin URLと正しく一致するようにしなければなりませんでした。

すべてのサーバーがJSONPをサポートするわけではありません。結果にコールバック関数を設定する必要があります。これを使用して、純粋なJSONを返すサイトからJSON応答を取得しますが、JSONPをサポートしていません。

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Apacheサーバーを使用しているため、mod_proxyモジュールを使用しています。モジュールを有効にする：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

それから加えて：

ProxyPass /your-proxy-url/ http://service-url:serviceport/

最後に、Proxy-URLをスクリプトに渡します。

最終メモとして Mozillaのドキュメントは明示的に述べていますそれ

ヘッダーがワイルドカードされていた場合、上記の例は失敗します。 Access-Control-Allow-Origin： *。 アクセスコントロール - アロウオリジンが明示的に言及しているため http：//foo.example、資格認定のコンテンツは、呼び出しのWebコンテンツに返されます。

結果は、「*」を使用するための単なる悪い習慣ではありません。単に機能しません:)

また、Chromeで同じエラーが発生しました（他のブラワーズをテストしませんでした）。これは、www.domain.comの代わりにdomain.comをナビゲートしていたためです。少し奇妙ですが、.htaccessに次の行を追加することで問題を解決できました。 domain.comをwww.domain.comにリダイレクトすると、問題が解決しました。私は怠zyなウェブ訪問者なので、WWWを入力することはほとんどありませんが、明らかにそれが必要なようです。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

jqueryの最新バージョンを使用していることを確認してください。 jquery 1.10.2のこのエラーに直面していましたが、jquery 1.11.1を使用した後、エラーが解決しました。

皆さん、

私は同様の問題に遭遇しました。しかし、フィドラーを使用して、私はこの問題に就くことができました。問題は、Web API側のCORS実装で構成されているクライアントURLに、後続のスラッシュがあってはならないことです。 Google Chromeを介してリクエストを送信した後、 TextView のタブ ヘッダー Fiddlerのセクションでは、エラーメッセージは次のようなものを記載しています。

*"指定されたポリシー起源your_client_url：/'は無効です。 前方のスラッシュで終わることはできません。」

Internet Explorerで問題なく機能したため、これは本当に風変わりですが、Google Chromeを使用してテストする際に頭痛がしました。

CORSコードのフォワードスラッシュを削除し、Web APIを再コンパイルしましたが、APIは問題なくChromeおよびInternet Explorerを介してアクセス可能になりました。これを試してください。

ありがとう、アンディ

投稿されたソリューションには小さな問題があります上記のCodeGrooverによって、ファイルを変更すると、実際に更新されたファイルを使用するためにサーバーを再起動する必要があります（少なくとも、私の場合）。

少し検索して、私は見つけましたこれです使用するには：

sudo npm -g install simple-http-server # to install
nserver # to use

そして、それはで機能します http://localhost:8000.

PHPの場合 - この作業はChrome、Safari、Firefoxでの仕事です

https://w3c.github.io/webappsec-cors-for-developers/#avoid-ritturning-access-control-olow-origin-null

header('Access-Control-Allow-Origin: null');

axiosを使用して、file：//を使用してphp liveサービスを呼び出します

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow