jquery - 足り - クロス オリジン 要求 を ブロック しま した firefox




なぜ、私のJavaScriptは、Postmanがアクセスできない場合、「要求されたリソースにAccess Control-Allow-Originのヘッダーが存在しません」というエラーが表示されるのはなぜですか? (20)

私は、 Flask構築されたRESTful API接続することによって、 JavaScriptを使用して認可をしようとしていAPI 。 しかし、リクエストをすると、次のエラーが表示されます。

XMLHttpRequestはhttp:// myApiUrl / loginをロードできません。 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 したがって、原点「ヌル」はアクセスが許可されません。

APIやリモートリソースでヘッダーを設定する必要があることはわかっていますが、Chrome拡張機能Postmanを使用してリクエストを行ったときに、なぜ機能しましたか?

これはリクエストコードです:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

これは本番用の修正ではなく、アプリケーションをクライアントに表示する必要がある場合、UIとバックエンドの開発が異なるサーバー上にあり、本番環境で同じサーバー上にある場合にのみ役立ちます。 たとえば、バックエンドサーバーをローカルでテストする必要がある場合は、任意のアプリケーションのUIを開発していますが、このシナリオは完璧な修正です。 プロダクションフィックスの場合、クロスオリジンアクセスを可能にするために、CORSヘッダーをバックエンドサーバーに追加する必要があります。

簡単な方法は、Google Chromeで拡張機能を追加してCORSを使用してアクセスできるようにすることです。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US

'access-control-allow-origin'ヘッダー要求にアクセスできないようにするには、この拡張機能を有効にしてください。

または

Windowsでは、このコマンドを実行ウィンドウに貼り付けます

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

これにより、新しいクロムブラウザが開き、 'access-control-allow-origin'ヘッダリクエストにアクセスすることができなくなります。


Ajaxを使用したドメイン間の問題があります。 あなたはwww.ない同じhttp://パス上のファイルにアクセスしていることを確認する必要がありますwww. www.経由してアクセスするときにブラウザが別のドメインと見なす(またはhttp://www.およびhttp://www.からの同じアクセスへのアクセス) www. 問題がどこにあるかを確認することができます。 あなたは起源の問題のために、別のドメインに投稿しており、ブラウザがフローをブロックしています。

APIが要求元のホストと同じホストに置かれていない場合は、フローがブロックされ、APIと通信する別の方法が必要になります。


GoLang APIの場合:

まず、CORSが何であるかを知るために、 MDN CORS Docをご覧ください。 私が知る限り、CORSはOrigin of Requestがサーバーリソースにアクセスするかどうかを決定するものです。

また、サーバー応答のHeaderAccess-Control-Allow-Originを設定することによって、どの要求の発信元がサーバーにアクセスできるかを制限することができます。

たとえば、「サーバー応答」のヘッダーを設定すると、 http://foo.exampleから送信された要求のみがサーバーにアクセスできます。

Access-Control-Allow-Origin: http://foo.example

任意の起点(またはドメイン)から送信された許可要求に従います。

Access-Control-Allow-Origin: *

そして私がエラーメッセージで知っているように、 requested resourceはサーバーのrequested resource意味するので、 requested resource No 'Access-Control-Allow-Origin' header is present on the requested resource. サーバーの応答にAccess-Control-Allow-Originヘッダーを設定しなかったか、または設定した可能性がありますが、要求元がAccess-Control-Allow-Originないためアクセスが許可されていないことを意味します。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 したがって、原点「ヌル」はアクセスが許可されません。

GoLangでは、 gorilla/muxパッケージを使用してlocalhost:9091でAPIサーバーを構築し、CORSに応答のヘッダーに"Access-Control-Allow-Origin", "*"を追加することを"Access-Control-Allow-Origin", "*"ます。

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

そして私はlocalhost:9092でクライアントでJavaScriptを使用していますが、Chromeからのリクエストはサーバーlocalhost:9091から "OKOK"を取得できます。

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

あなたはFiddlerようなツールでリクエスト/レスポンスヘッダを確認することができます。


Entity Frameworkを使用している場合は、 CORS有効になっていてもこのエラーがスローされることがあります。 私は、クエリのファイナンスが不足しているためにエラーが発生したことを知りました。 私はこれが同じ状況で他の人を助けることを望んでいます。

次のコードでは、 XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. エラー:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

これを修正するには、クエリの最後に.ToList().FirstOrDefault()などのファイナライズ呼び出しが必要です。

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}

PHPを使用している場合、解決するのは非常に簡単です。 リクエストを処理するPHPページの先頭に次のスクリプトを追加するだけです:

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

警告:これには、攻撃者が呼び出す可能性のあるPHPファイルのセキュリティ上の問題が含まれています。 この攻撃に対するファイル/サービスを防止するために、認証にセッションとクッキーを使用する必要があります。 あなたのサービスは、 クロスサイトリクエストフォージェリー (CSRF)に対して脆弱です。

Node-redを使用している場合、 node-red/settings.jsファイルでCORSを許可する必要があります。次の行のコメントを外します。

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

https://github.com/Rob--W/cors-anywhere/は、独自のCORSプロキシを設定して実行するために使用できる(Node.js)コードがあります。 これは積極的に維持され、正しいAccess-Control-*レスポンスヘッダーの基本的な送信以外にも、プロキシの動作を制御するためのいくつかの機能を提供します。

developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORSは、クライアント側のWebアプリケーションがJavaScriptから作成するクロスオリジン要求と、どの送信側で送信を設定する必要があるかをブラウザがどのように処理するかを説明する詳細があります。可能であれば、要求が行われたサーバー。

要求を出してから応答を得る必要があるサイトがAccess-Control-Allow-Origin応答ヘッダーを返さない場合、ブラウザは常にクライアントからの直接のクロスオリジン要求をブロックしますサイドのJavaScriptコードは機能しません。 したがって、サイトが制御するものでなく、振る舞いを構成できる場合は、自分自身で実行する独自のプロキシまたはオープンプロキシを介して、要求をプロキシするだけです。

ここでの他のコメントで述べたように、あなたの要求にオープンなプロキシを信頼しない理由があります。 つまり、あなたが何をしているのかわかっていて、オープンプロキシがあなたのニーズに合っていると判断すれば、 https://cors-anywhere.herokuapp.com/は信頼性が高く、積極的に維持され、 https://github.com/Rob--W/cors-anywhere/コード。

ここで言及されている他の公開プロキシ(少なくとももう利用できないようなカップル)と同様に、クライアントコードがhttp://foo.comリクエストを直接送信するのではなく、 http://foo.comhttps://cors-anywhere.herokuapp.com/http://foo.com送信すると、プロキシはブラウザーに表示される応答に必要なAccess-Control-*ヘッダーを追加します。


私は以下の設定をしていたので、サーバからの応答を要求するときに同じエラーが発生しました。

サーバー側: SparkJava - > REST-APIを提供する
クライアント側: ExtJs6 - >ブラウザレンダリングを提供

サーバー側では、これをレスポンスに追加する必要がありました。

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

クライアント側では、これをリクエストに追加する必要がありました。

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、Origin ' https://sx.xyz.com 'はアクセスが許可されていません。

私はまた、Ajaxのレスポンスでクロスドメインのデータ交換と同様の問題に直面していた未定義のエラー。しかしヘッダーの応答はステータスコード:200 OKでした

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

解決策:私の場合、Ajaxを介して別のドメインにcheckapikey()関数を呼び出し、呼び出しが行われた場所のデータを含む応答を取得することでした。

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_ORIGIN'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_ORIGIN']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}

shrutiの答えに基づいて、私は必要な引数を持つChromeブラウザのショートカットを作成しました:


あなたがJSONを扱うことができれば、ドメイン間で話すためにJSONP (最後にPに注意してください)を試してみてください:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

JSONP here作業の詳細はhere

JSONP(本質的に合意に基づくクロスサイトスクリプティングハック)の出現は、強力なコンテンツのマッシュアップへの扉を開いた。 多くの有名なサイトでJSONPサービスが提供されているため、事前定義済みのAPIを使用してコンテンツにアクセスできます。


この問題を回避するには、YQLを使用してYahooのサーバーを介して要求をプロキシします。 コードのほんの数行です:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

説明とのリンクは次のとおりです: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html : https://vverma.net/fetch-any-json-using-jsonp-and-yql.html


これらの回答のほとんどは、制御するサーバーにCORSヘッダーを追加する方法をユーザーに伝えます。

ただし、Webページで制御しないサーバーからのデータが必要な場合は、ページ上にスクリプトタグを作成し、CORSヘッダーを持たないapiエンドポイントにsrc属性を設定し、そのデータを読み込みますページに:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);

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

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

あなたが制御できないリモートサーバに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ホテルの検索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));

あなたは同じクエリをやっているだけですが、サーバー側とそれ以降はうまくいくはずです。

答えはNizarBsbからコピーされ貼り付けられNizarBsb


人気のある質問 - あなたがこれを読んで、それ以外のものを読んだことがないかどうかを調べるもう1つのこと。 Akamai、LimelightなどのCDNをお持ちの場合は、リソースのURIにあるキャッシュキーを確認してください。 Originヘッダー値が含まれていない場合は、別のOriginから要求されたときにキャッシュされた応答を返す可能性があります。 我々はこれをデバッグするのに半日を費やしました。 CDN設定がアップデートされ、私たちのいくつかの選択されたドメインのOrigin値だけが含まれ、他のドメインの場合はnullに設定されました。 これはうまくいくと思われ、われわれの知られているドメインのブラウザがリソースを見ることができます。 CDNがあなたのブラウザからの最初のホップであるならば、確かに他のすべての答えはここに来るための前提条件ですが、これはレビューするものです。

私たちのケースでは、私たちのサービスのためにいくつかのリクエストを行うことができましたが、サイトが送っていた音量にはほとんど影響しませんでした。 それは私たちをCDNに指摘しました。 元のリクエストがブラウザAJAXコールの一部ではなく、直接リクエストから提供され、レスポンスヘッダーAccess-Control-Allow-Originが含まれていなかったことを確認できました。 どうやらCDNはこの値をキャッシュしていました。 AkamaiのCDN設定は、試合の一部としてのOriginリクエストヘッダー値を考慮して調整しているようです。


私のウェブサイト(.NETベース)では、これを追加しました:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

thisビデオに大きな感謝。


私の場合、JEE7 JAX-RSアプリケーションを使用していましたが、以下のトリックは私にとって完璧に機能しました:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }

私は誰かがこのサイトをhttp://cors.io/前に私と共有してくれればと思っていhttp://cors.io/ 。 しかし、プロダクションに移るにつれて、独自のプロキシを持つことは、データのすべての側面を依然として制御しているため、最善の策です。

必要なもの:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


Ruby on Railsサーバーの場合はapplication_controller.rb、次のように追加します。

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end

たぶんそれはちょっと複雑ですが、Webサーバーを使ってリクエストをルーティングすることができます。nodejsでは、この問題は発生しません。私はノードjsの専門家ではない。だから私はこれがクリーンなコードかどうかは分かりません。

しかし、これは私のために働く

ここに少しの例があります:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})

完全性のために、Apacheはcorsを許可します:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"




flask-restless