私のJavaScriptのコードが

javascript jquery cors same-origin-policy flask-restless


Mod注:この質問は、なぜPostmanがXMLHttpRequestと同じようにCORS制限を受けない理由についてです。この質問はありません「いいえ『アクセス制御-許可-起源』 ...」エラーを修正する方法について。

投稿を停止してください


RESTful API組み込みFlaskに接続することにより、JavaScriptを使用して認証を実行しようとしています。しかし、リクエストを行うと、次のエラーが発生します。

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

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);
    });



Answer 1 MD. Sahib Bin Mahboob


私が正しく理解していれば、ページが表示されているドメインとは異なるドメインに対してXMLHttpRequestを実行しています。したがって、セキュリティ上の理由から、通常は同じオリジンでリクエストを許可するため、ブラウザはそれをブロックしています。クロスドメインリクエストを行う場合は、別のことを行う必要があります。それを達成する方法についてのチュートリアルはCORSの使用です。

郵便配達員を使用している場合、このポリシーによる制限はありません。Cross-Origin XMLHttpRequestから引用:

通常のWebページはXMLHttpRequestオブジェクトを使ってリモートサーバからデータを送受信することができますが、同じオリジンポリシーによって制限されます。拡張機能はそれほど制限されていません。拡張機能は、最初にクロスオリジンパーミッションを要求する限り、オリジン以外のリモートサーバと通信することができます。




Answer 2 Shady Sherif


警告: Access-Control-Allow-Origin: * を使用すると、* API /ウェブサイトがクロスサイトリクエストフォージェリ(CSRF)攻撃に対して脆弱になる可能性があります。このコードを使用する前に、リスクを確実に理解してください。

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

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

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"
},

質問と同じFlaskを使用している場合; 最初に flask-cors をインストールする必要があります

$ pip install -U flask-cors

その後、アプリケーションにFlask corsをインクルードします。

from flask_cors import CORS

簡単なアプリだとこんな感じになります。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

詳細については、Flaskのドキュメントを確認してください。




Answer 3 George Livingston


Because
$ .ajax({type: "POST" -OPTIONSを呼び出します
($ .post -呼び出しPOSTを

どちらも違います。Postmanは「post」をきちんと呼んでいますが、呼ぶときは「options」になります。

C#Webサービスの場合-Web API

<system.webServer>タグの下のweb.configファイルに次のコードを追加してください。これは動作します:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Ajaxの呼び出しを間違えていないか確認してください。

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

注:サードパーティのウェブサイトからコンテンツをダウンロードすることを探している場合、これは役に立ちません。次のコードを試すことはできますが、JavaScriptを試すことはできません。

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");



Answer 4 Gopinath


CORS制限の適用は、サーバーによって定義され、ブラウザによって実装されるセキュリティ機能です

ブラウザはサーバーのCORSポリシーを見て、それを尊重します。

しかし、PostmanツールはサーバーのCORSポリシーを気にすることはありません。

そのため、ブラウザではCORSエラーが表示されるが、Postmanでは表示されない。




Answer 5 Kamil Kiełczewski


以下の調査ではAPIとして、質問のhttp:// myApiUrl / loginではなくhttp://example.comを使用しています。

あなたのページはhttp://my-site.local:8088にあると思います

結果が違うのは、ポストマンが原因です。

  • ヘッダー Host=example.com (あなたのAPI)を設定します
  • ヘッダーの Origin 設定しない

これは、サイトとAPIが同じドメインの場合にブラウザーがリクエストを送信する方法に似ています(ブラウザーもヘッダーアイテム Referer=http://my-site.local:8088 を設定しますが、Postmanには表示されません) 。 Origin ヘッダーが設定されていない場合、通常、サーバーはデフォルトでそのようなリクエストを許可します。

Enter image description here

これは、Postmanがリクエストを送信する標準的な方法です。ただし、サイトとAPIのドメインが異なる場合、ブラウザはリクエストを異なる方法で送信し、その後CORSが発生してブラウザが自動的に実行されます。

  • ヘッダー Host=example.com を設定します(あなたのAPIとして)
  • ヘッダー Origin=http://my-site.local:8088 (あなたのサイト)を設定します

(ヘッダーの Referer 値は Origin と同じです)。Chromeの[ コンソールとネットワーク ]タブに次のように表示されます。

Enter image description here

Enter image description here

あなたが持っている場合は Host != Origin これがCORSであり、サーバがそのような要求を検出し、それは通常、デフォルトでブロックして

Origin=null は、ローカルディレクトリからHTMLコンテンツを開いたときに設定され、リクエストを送信します。以下のスニペットのように <iframe> 内でリクエストを送信する場合も同じ状況です(ただし、ここでは Host ヘッダーはまったく設定されていません)-一般に、HTML仕様で不透明な原点が示されている場合は、それを Origin=null 変換できます= null。この詳細については、こちらをご覧ください

fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab

単純なCORSリクエストを使用しない場合、通常、ブラウザはメインリクエストを送信する前にOPTIONSリクエストも自動的に送信します。詳細はこちらです。以下のスニペットはそれを示しています:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});
Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

サーバーの設定を変更して、CORS リクエストを許可することができます。

nginx(nginx.confファイル)でCORSをオンにする設定例は次のとおりです。nginxの always/"$http_origin" とApacheの "*" の設定には十分注意してください。これにより、どのドメインからでもCORSのブロックが解除されます。

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Apache(.htaccessファイル)でCORSを有効にする設定例を以下に示します。

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"