web-dev-qa-db-ja.com

「OriginはAccess-Control-Allow-Originで許可されていません」というエラーが表示されるのはなぜですか。

次のようなエラーが表示されます。

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

このコードでは：

var http = new getXMLHttpRequestObject();
var url = "http://gdata.youtube.com/action/GetUploadToken";
var sendXML = '<?xml version="1.0"?><entry xmlns="http://www.w3.org/2005/Atom"'+
    'xmlns:media="http://search.yahoo.com/mrss/'+
    'xmlns:yt="http://gdata.youtube.com/schemas/2007">'+
    '<media:group><media:title type="plain">My First API</media:title>'+
    '<media:description type="plain">First API</media:description>'+
    '<media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>'+
    '<media:keywords>first, api</media:keywords></media:group></entry>';
http.open("POST", url, true);
http.setRequestHeader("Authorization", "AuthSub token=" + AccessToken);
http.setRequestHeader("X-GData-Key", "key="+ dev_key);
http.setRequestHeader("Content-Type", "application/atom+xml; charset=UTF-8");

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseXML);
    }
}
http.send(sendXML);

何がこれを引き起こす可能性があります、そしてどのように私はそれを解決しますか？

javascriptajaxcorsxmlhttprequestyoutube-api
151
Muhammad Usman

現在のドメイン外でajaxリクエストを行う場合、Javascriptは制限されています。

  • 例1：あなたのドメインはexample.comであり、あなたはtest.comにリクエストをしたい=>あなたはできません。
  • 例2：あなたのドメインはexample.comであり、あなたはinner.example.comにリクエストしたいです=あなたはできません。
  • 例3：あなたのドメインはexample.com:80であり、あなたはexample.com:81にリクエストしたいです=あなたはできません
  • 例4：あなたのドメインはexample.comであり、あなたはexample.comにリクエストをしたい=>することができます。

Javascriptはセキュリティ上の理由から「同じOriginポリシー」によって制限されているため、悪意のあるスクリプトがリモートサーバにアクセスして機密データを送信することはできません。

jsonp は、JavaScriptを使用するための別の方法です。リクエストをすると、結果はクライアントで実行されるコールバック関数にカプセル化されます。それはあなたのhtmlの頭の部分に新しいscriptタグをリンクするのと同じです（あなたはあなたがここにあなたのものとは異なるドメインからスクリプトをロードできることを知っています）。
ただし、jsonpを使用するにはサーバーを正しく設定する必要があります。そうでない場合は、jsonpを使用できず、サーバーサイドのプロキシ（PHP、ASPなど）に頼らなければなりません。このトピックに関するたくさんのガイドがあります。

171
andreapier

「同じOriginポリシー」のため、XMLHttpRequestではlocalhost:8080にアクセスできません。

localhost:8080のレスポンスにヘッダーを追加することで、最近のブラウザからのリクエストを許可できます。

Access-Control-Allow-Origin: *

HTTPサーバーにディレクティブを追加するか、サーバーサイドコード（PHP、Rubyなど）を介してヘッダーを追加することでこれを行うことができます。

Cross-Origin ajaxリクエストの詳細については、 https://developer.mozilla.org/en/http_access_control をご覧ください。

88
Sunny

Chromeを使用している場合、（開発目的のためだけの）簡単な回避策はオプション--disable-web-securityを使用することです。

37
Deqing

ソリューションにglobal.asaxを追加します。

追加する

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

に

protected void Application_BeginRequest(object sender, EventArgs e)
{
}
10
Ammar Khan

もしあなたがApacheを使っているのであれば、これはうまくいきます：あなたの公開ルートに.htaccessファイルを/作成し、必要な他のファイル拡張子を追加してください。

<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
9
Eric Leroy

ローカル開発の場合は、HTTPレスポンスヘッダを修正するためのツールを使用できます。例えば Charles は含まれている書き換えツールによってこれをすることができます： 書き換えツール

以下を使用して、ターゲットドメイン/場所に新しいルールを追加するだけです。

Type: Add Header
Where: Response
Replace
     Name: Access-Control-Allow-Origin
     Value: *
Replace All
7
Christian Müller

ここでは、Apache Httpに対して2つのことをする必要があります。

1）httpd.configファイルで、このファイルのコメントを外します

LoadModule headers_module modules/mod_headers.so

2）この行を一番下に追加します。

Header set Access-Control-Allow-Origin "*"
4
Sireesh Yarlagadda

google Chromeをブラウザとして使用している場合は、CORS拡張子を追加して有効にすることで、コードの内容を変更しなくても問題を解決できます。

3
Meriam

この特定の質問とは関係ありませんが、jQueryを使用しているこの状況の場合... jQueryを使用してJSONPリクエストを作成し、マジックコールバックパラメーターを省略すると、このエラーも発生します：callback=?

2
danwellman

もしあなたがJavaのバックグラウンドを持っているのなら、1つの解決策はあなたのjavascriptのためのWebサービスを呼び出すサーブレットを作ることでしょう。下記のGET（Your-choice）メソッドのコードのようなもの...

JsonElement jelement;
    JsonArray jarray;
    try {
        URL url = new URL("http://rest."YOUR URL"#ba0482");
        URLConnection connection = url.openConnection();
        connection.setDoInput(true);
        InputStream inStream = connection.getInputStream();
        BufferedReader input = new BufferedReader(new InputStreamReader(inStream));

        jelement = new JsonParser().parse(input);

        jarray = jelement.getAsJsonArray();

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(jarray);
        out.flush();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

JavaScriptでは、サーブレット名としてURLを指定するだけです。

2
Saty

私は同じエラーメッセージに遭遇しました、phpページにアクセスするためにajaxを使うとき（javascriptとphpファイルは両方とも同じサーバー上にあります）。

その理由は、JavaScriptでドメインとしてIPアドレスを指定したためです。これにより、ブラウザはphpファイルへの呼び出しが別のサーバー上にあると判断しました。

だから、このエラーメッセージを取り除く簡単な解決策。 a）JavaScriptとphpファイルが同じサーバー上にあることを確認します。b）あなたのJavaScriptのURL（特にドメイン）を確認します（例： http://www.smartana.co.uk/myJavaScript.js ）ajaxはあなたのサーバーURLを反映します（例： http://www.smartana.co.uk/myServer.php ）。

0
Wolfi