Postmanが受け取らないのに、JavaScriptコードが「要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません」というエラーを受け取るのはなぜですか?

2628
Mr Jedi 2013-11-18 09:29.

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

投稿を停止してください


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

XMLHttpRequestはhttp:// myApiUrl / loginをロードできません。要求されたリソースに「Access-Control-Allow-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);
    });

8 answers

1404
MD. Sahib Bin Mahboob 2013-11-18 09:49.

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

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

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

266
Shady Mohamed Sherif 2014-12-04 10:24.

警告:を使用Access-Control-Allow-Origin: *すると、API / Webサイトがクロスサイトリクエストフォージェリ(CSRF)攻撃に対して脆弱になる可能性があります。このコードを使用パブリックおよび読み取り専用Webサービスに対してCORSを*有効にするのは安全ですか?前にパブリックおよび読み取り専用Webサービスに対してCORSを*有効にするのは安全ですか?パブリックおよび読み取り専用Webサービスに対してCORSを*有効にするのは安全ですか?を確認してください。

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

次に、Flaskcorsをアプリケーションに含めます。

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のドキュメントを確認してください。

68
George Livingston 2016-12-14 03:02.

そのため
$アヤックス({タイプ: "POST" -通話のOPTIONS
$ .postが( -呼び出しPOSTを

どちらも違います。郵便配達員はきちんと「POST」と呼んでいますが、呼んでみると「OPTIONS」になります。

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

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

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

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

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");
17
Kamil Kiełczewski 2019-12-16 23:06.

以下のAPIとしての調査では、最初の質問が機能しているため、質問のhttp:// myApiUrl / loginの代わりにhttp://example.comを使用します。

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

異なる結果が表示される理由は、Postman:

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

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

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

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

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

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

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

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

単純なCORSリクエストを使用しない場合、通常、ブラウザはメインリクエストを送信する前にOPTIONSリクエストも自動的に送信しアクセス制御リクエストヘッダーは、jQueryを使用してAJAXリクエストのヘッダーに追加されます。詳細についてはアクセス制御リクエストヘッダーは、jQueryを使用してAJAXリクエストのヘッダーに追加されます。以下のスニペットはそれを示しています:

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をオンにする構成例です-nginxalways/"$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;
    }
}

ApacheCORSをオンにする設定例を次に示します(.htaccessファイル)

# ------------------------------------------------------------------------------
# | 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"

12
Gopinath 2020-02-03 00:27.

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

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

ただし、PostmanツールはサーバーのCORSポリシーを気にしません。

そのため、CORSエラーはブラウザに表示されますが、Postmanには表示されません。

8
Kms 2020-03-11 07:34.

異なるユースケースで同じエラーが発生しました。

ユースケース:SpringRESTエンドポイントを角度で呼び出そうとしたときのクロム。

解決策:それぞれのコントローラークラスの上に@CrossOrigin( "*")アノテーションを追加します。

3
Adwaith 2020-07-22 07:06.

javascriptでfetchAPIまたはXMLHttpRequestを使用してコンテンツをフェッチするときにこの制限を回避する場合は、プロキシサーバーを使用してヘッダーAccess-Control-Allow-Originをに設定できます*

const express = require('express');
const request = require('request');

const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/fetch', (req, res) => {
  request(
    { url: req.query.url },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).send('error');
      }
      res.send(body);
    }
  )
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

上記は、プロキシサーバーとして機能できるサンプルコード(ノードJが必要)です。例:https://www.google.com通常どおりフェッチしたい場合、CORSエラーがスローされますが、リクエストはポート3000でローカルにホストされているプロキシサーバーを介して送信されるため、プロキシサーバーAccess-Control-Allow-Originは応答にヘッダーを追加し、問題は発生しません。

フェッチYour URL hereするURlにリクエストを直接送信する代わりに、GETリクエストをhttp:// localhost:3000 / fetch?url =に送信します。

Your URL here フェッチしたいURLを表します。例: https://www.google.com

0
Shakti Srivastav 2020-04-19 06:12.

.NET Core Web APIプロジェクトの場合のみ、次の変更を追加します。

  1. Startup.csファイルのメソッドのservices.AddMvc()行の後に次のコードを追加しConfigureServices()ます。
services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });
  1. Startup.csファイルのメソッドのapp.UseMvc()行の後に次のコードを追加しConfigure()ます。
app.UseCors(options => options.AllowAnyOrigin());
  1. ドメイン外でアクセスするコントローラーを開き、コントローラーレベルで次の属性を追加します。
[EnableCors("AllowOrigin")]

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ジョー・バロウロー対ウェイド事件の転覆に対応するNFLは、言葉を言わないことで、腹立たしいが予測可能なPRの結果でした。

別の日、別のヒンジのないLIV記者会見

別の日、別のヒンジのないLIV記者会見

(lから)パット・ペレス、ブルックス・ケプカ、パトリック・リードサウジアラビアのLIVゴルフリーグのさらに別の信じられないほどの記者会見で、スポーツのファンはブルックス・ケプカからでたらめな吐き気と質問回避の驚異的なマスタークラスを受けました。パトリックリード、ブライソンデシャンボー、パットペレス、最近のPGAツアーの脱北者。

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

レッドダガーとマーベルさんがチームを組んでいます。

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

暗号業界最大の沈没船の1つであるスリーアローズキャピタルは、ついにその悲惨さから解放されています。火曜日に、不良債権ヘッジファンドは、債権者からの返済を要求する訴訟の高まりに応えて、バージンアイランド裁判所によって清算を命じられました彼らが3ACに行ったローン。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

Suffragettes Indicam #3: Junho

Suffragettes Indicam #3: Junho

Mais um mês se findando — e metade do ano de 2022 já passou. Sabe o que isso significa? Não, não é hora de verificar se você está cumprindo com suas resoluções de Ano Novo.

多元宇宙—Junø

多元宇宙—Junø

チェーン間アカウントがJunoに登場します。異なるブロックチェーン間でスマートコントラクトの構成可能性と真の相互運用性を提供します。

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

1.ドラマを見た後、起業する考えはありますか?あなたのビジネスはボトルネックに遭遇しましたか?方向性がなくてわからない場合は、ドラマを追いかけて行くことを心からお勧めします。(?)ブラフではなく、最も完璧なビジネス例を隠すドラマがあります。2.ブレイキング・バッドとその弁護士ドラマ「ブレイキング・バッド」を見た友人たちは、演劇の中で、穏やかな表情で、弁護士のソウル・グッドマンに深く感銘を受けなければなりません。口を開けて、感覚の弱い傭兵の性格を持っています。道徳の面で、サル・グッドマンは無意識のうちに劇に欠かせない役割を果たし、彼自身のシリーズ「絶望的な弁護士」(ベター・コール・ソール)を生み出しました。ウェントウのテキストとビデオは、劇中のソウル・グッドマンのテレビコマーシャルです。製品(サービス)、競争戦略、市場ポジショニング、ブランド名、ターゲット顧客グループ、コミュニケーション軸から広告まで、サル・グッドマンの役割のビジネス設定は、「最低」と見なすことができる超超超超超超完全です。ブランドコミュニケーションのコスト」「変化」のモデル。なぜ?私の分析をご覧ください。3.ソウル・グッドマンの「事業戦略」1.基本情報ブランド名:Saul Goodman製品:法律相談サービス対象顧客:麻薬中毒、飲酒運転、事故など。法律知識の欠如は、一般的に公立弁護士にしか余裕がなく、真面目な弁護士も「特別な法律を持つ消費者」を避けます。恐れてはいけない「​​ニーズ」。コミュニケーションの主軸:この国のすべての男性、女性、子供は有罪判決を受けるまで無実だと思います。地域:アルバカーキ市スローガン:Thrallに電話したほうがいいです!(ベター・コール・ソール)広告:2つの可能性のある犯罪状況をシミュレートします+サウルの主張+サウルのスローガン2をより適切に呼び出します。

メインネットガイド— Arbitrum Odyssey Week 2

メインネットガイド— Arbitrum Odyssey Week 2

最新のアップデートを受け取るために私たちに従ってください。ニュースレター:https://www。

Language