web-dev-qa-db-ja.com

jqueryでのCORSエラー

私は現在、 cloudapp API を使用してプロジェクトに取り組んでおり、jqueryを使用しています。これが私のコードです：

 $.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

これを実行すると、Firefoxで200OKの応答とこのエラーが発生します。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cl.ly/2wr4. This can be fixed by moving the resource to the same domain or enabling CORS.

そしてGoogleChromeのこのエラー：

XMLHttpRequest cannot load http://cl.ly/2wr4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

コンソールには何も記録されません。このエラーを修正するにはどうすればよいですか？

ありがとう。

javascriptjqueryajaxcors
5
mrHorse

CORS（Cross-Origin Resource Sharing）は、異なるドメイン名であるにもかかわらず、あるサイトが別のサイトのリソースにアクセスできるようにするHTML5機能です。

CORSのW3C仕様は、実際には、キーヘッダー、Access-Control-Allow-Origin、およびWebサーバーでCORSを有効にするために使用する必要があるその他のヘッダーなどの応答ヘッダーの簡単な例を提供するという非常に優れた機能を果たします。

さまざまな一般的なWebサーバーでCORSを設定する方法に関する具体的な情報を探している場合は、[CORS共有を有効にする] Webサイトを確認してください。 http://enable-cors.org/

上記のURLに基​​づくと、そのサーバーを制御できるとは思いません。したがって、それは単に機能しません。

CrossDomain：trueを有効にしている場合でも、サーバーは次のような必要なヘッダーを返す必要があります。

これが有効なサーバー応答です。 CORS固有のヘッダーは太字で示されています

HTTP応答：

Access-Control-Allow-Origin: http://xyzcom
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

あなたが試すことができる1つのことはこれです：

$.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
          },
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

それ以外の場合は、APIプロバイダーに連絡する必要があります。

5
codebased

これらの新しいコーダーにとって重要な注意点は、 http://enable-cors.org/server.html のすべてが、サーバーが実行されていることを前提としていることです。私が最初にいたように、あなたが新しい場合、これらのタイプの答えは役に立ちません。

コンピューターやCodePenなどでコードを作成したばかりの場合は、これを構成することはできません。

サーバー側とクライアント側のスクリプトには重要な違いがあります。jqueryはクライアント側（つまり、ユーザーのコンピューター/ブラウザー）で実行されているため、ヘッダーを設定するようなことはありません。

自分のサーバーと自分のPHPファイル（PHPはサーバー側であるため、ブラウザーではなくサーバーで処理される）をセットアップしたときに、ようやくこの問題の進行を開始しました。リクエストを問題なく開始できます。

"Header set Access-Control-Allow-Origin "*"回答を含む回答に溺れている人のためにこれを追加します。私も始めたときは本当にイライラしました。

3
backslash

エラーを修正するには、サーバーでCORSを有効にする必要があります。クライアントは、リクエストを許可するためにCORSヘッダーが返送されることを期待しています。ヘッダーがそこにあることを確認するために、プリフライトリクエストを送信することもあります。

サーバーにアクセスする1つ、複数、またはすべてのドメインに対してCORSサーバー側を有効にできます。サーバーの種類によって構成が異なります。

詳細については、次のページを参照してください： http://enable-cors.org/server.html

上記のリクエストですでにCORSリクエストを有効にしているので、クライアント側ですべて設定する必要があります。

1
Bassel

Corsエラーを取り除くには、jQueryの最小ファイルを変更する必要があります。

enter image description here

0
Chris Dormani