CORSポリシーによってブロックされています:プリフライトリクエストへの応答がアクセス制御チェックに合格しません

44
GGG 2018-11-15 00:52.

トリップサーバーを作成しました。正常に動作しPOST、Insomniaからリクエストを送信できPOSTますが、フロントエンドでaxiosからリクエストを送信すると、エラーが送信されます。

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

axiosに関する私たちのリクエスト:

let config = {
headers: {
  "Content-Type": "application/json",
  'Access-Control-Allow-Origin': '*',
  }
}

let data = {
  "id": 4
 }

 axios.post('http://196.121.147.69:9777/twirp/route.FRoute/GetLists', data, config)
   .then((res) => {
      console.log(res)
     })
    .catch((err) => {
      console.log(err)
   });
} 

私のgoファイル:

func setupResponse(w *http.ResponseWriter, req *http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Methods", "POST,GET,OPTIONS, PUT, DELETE")

    (*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}


func WithUserAgent(base http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {

    ctx := r.Context()
    ua := r.Header.Get("Jwt")
    ctx = context.WithValue(ctx, "jwt", ua)

    r = r.WithContext(ctx)

    setupResponse(&w, r)
     base.ServeHTTP(w, r)
  })
}

const (
    host     = "localhost"
    port     = 5432
    user     = "postgres"
    password = "postgres"
    dbname   = "postgres"
)

func main() {

    psqlInfo := fmt.Sprintf("host=%s port=%d user=%s "+
           "password=%s dbname=%s sslmode=disable",
               host, port, user, password, dbname)

    server := &s.Server{psqlInfo}

    twirpHandler := p.NewFinanceServiceServer(server, nil)

    wrap := WithUserAgent(twirpHandler)
      log.Fatalln(http.ListenAndServe(":9707", wrap))
}

前にInsomniaで言ったように、それはうまく機能しますが、axiosPOSTリクエストを行うと、ブラウザのコンソールに次のように表示されます。

CORSポリシーによってブロックされました:プリフライトリクエストへの応答がアクセス制御チェックに合格しません:HTTPokステ​​ータスがありません。

8 answers

36
threeve 2018-11-15 05:55.

これが最も簡単な例だと思います。

header := w.Header()
header.Add("Access-Control-Allow-Origin", "*")
header.Add("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
header.Add("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With")

のヘッダーを追加することもできAccess-Control-Max-Ageます。もちろん、必要なヘッダーとメソッドを許可することもできます。

最後に、最初の要求に応答します。

if r.Method == "OPTIONS" {
    w.WriteHeader(http.StatusOK)
    return
}

編集(2019年6月):現在使用しています https://github.com/gorilla/handlersこのため。彼らのものはより積極的に維持されており、彼らはこれを本当に長い間行ってきました。万が一に備えて、古いものへのリンクを残します。

以下の古いミドルウェアの推奨事項: もちろん、これにはミドルウェアを使用する方が簡単でしょう。使ったことはないと思いますがhttps://github.com/rs/cors 強くお勧めします。

9
Ryan Shillington 2019-10-04 03:14.

この回答は、舞台裏で何が起こっているのか、そしてこの問題をどの言語でも解決する方法の基本を説明しています。参考までに、https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

あるドメイン(たとえばdomain-a.com)で実行されているJavaScriptから別のドメイン(domain-b.com)で実行されているAPIへのURLをリクエストしています。その場合、ブラウザはdomain-b.comに、domain-a.comからのリクエストを許可してもよいかどうかを尋ねる必要があります。それはHTTPOPTIONSリクエストでそれを行います。次に、応答で、domain-b.comのサーバーは、(少なくとも)「うん、大丈夫」という次のHTTPヘッダーを指定する必要があります。

HTTP/1.1 204 No Content                            // or 200 OK
Access-Control-Allow-Origin: https://domain-a.com  // or * for allowing anybody
Access-Control-Allow-Methods: POST, GET, OPTIONS   // What kind of methods are allowed
...                                                // other headers

Chromeを使用している場合は、F12キーを押して[ネットワーク]タブに移動し、domain-b.comのサーバーからの応答を確認すると、応答がどのように表示されるかを確認できます。

それで、@ threeveの元の答えから最低限に戻ってください:

header := w.Header()
header.Add("Access-Control-Allow-Origin", "*")

if r.Method == "OPTIONS" {
    w.WriteHeader(http.StatusOK)
    return
}

これにより、どこからでも誰でもこのデータにアクセスできるようになります。彼が含めた他のヘッダーは他の理由で必要ですが、これらのヘッダーはCORS(クロスオリジンリソースシェアリング)要件を超えるための最低限のものです。

5
Usman Mahmood 2019-01-02 02:39.

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api 詳細についてはクリックしてください

WebServiceアプリでCORSを有効にします。まず、CORSNuGetパッケージを追加します。Visual Studioで、[ツール]メニューから[NuGetパッケージマネージャー]を選択し、[パッケージマネージャーコンソール]を選択します。パッケージマネージャーコンソールウィンドウで、次のコマンドを入力します。

Install-Package Microsoft.AspNet.WebApi.Cors

このコマンドは、最新のパッケージをインストールし、コアWebAPIライブラリを含むすべての依存関係を更新します。-Versionフラグを使用して、特定のバージョンをターゲットにします。CORSパッケージには、Web API2.0以降が必要です。

App_Start /WebApiConfig.csファイルを開きます。次のコードをWebApiConfig.Registerメソッドに追加します。

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

次に、[EnableCors]属性をコントローラー/コントローラーメソッドに追加します

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

3
7guyo 2020-04-13 23:32.

AngularおよびDjangoRestフレームワーク。

DRFAPIにPOSTリクエストを行っているときに同様のエラーが発生しました。たまたま私が見逃していたのは、エンドポイントの末尾のスラッシュだけでした。

2
JAD 2019-03-31 08:13.

ここで提供される解決策は正しいです。ただし、エンドポイントのリクエスト方法がリクエスト時に使用したメソッドと一致しないユーザーエラーからも同じエラーが発生する可能性があります。

たとえば、メソッドをPOSTとして要求している間、サーバーエンドポイントは「RequestMethod.PUT」で定義されます。

1
Shakthifuture 2020-11-13 06:23.

CORSの問題はバックエンドで修正する必要があります。一時的な回避策では、このオプションを使用します。

  1. に移動 C:\Program Files\Google\Chrome\Application

  2. コマンドプロンプトを開く

  3. コマンドを実行します chrome.exe --disable-web-security --user-data-dir="c:/ChromeDevSession"

上記のオプションを使用すると、セキュリティなしで新しいChromeを開くことができます。このクロムはcorsの問題をスローしません。

0
Oranit Dar 2020-07-22 03:03.

私にとってうまくいったのは、IISで新しいアプリケーションを作成し、それをまったく同じ物理パスにマッピングし、認証のみを匿名に変更することだけでした。

0
e11en 2020-11-26 04:59.

これを見て、追加しても結果が得られなかった場合は、を追加してAccess-Control-Allow-OriginみてくださいAccess-Control-Allow-Headers。頭痛から誰かを守るかもしれません。

Related questions

MORE COOL STUFF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

グッドジョブ、ESPN

グッドジョブ、ESPN

今日のホワイトハウスの記者会見で、報道官のサラ・ハッカビー・サンダースは、スポーツセンターのホストであるイェメル・ヒルのドナルド・トランプに関する最近のツイートについてコメントするよう求められ、大統領と彼の政策を白人至上主義者として説明した。ヒルは彼女のつぶやきのためにESPNによって公に叱責されました。

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

基本的に頭のあらゆる部分から髪の毛を整えたり、ブロードライしたり、まっすぐにしたり、脱毛したりする必要がある場合は、このレミントンゴールドボックスが最適です。今日だけ、Amazonは、すでに人気のあるShortcut Pro Self-HaircutKitやPearlPro Ceramic Flat Ironのように、グルーミングをはるかに簡単にするヘアツールをマークダウンしています。

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

トゥパックシャクール(ティムモーゼンフェルダー/ゲッティイメージズ); マヤアンジェロウ(マーティンゴッドウィン/ゲッティイメージズ)移動、テイラースウィフト。ケンドールとカイリーは、必要な数の座席を持っています。

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

写真:Tesla Motorsフロリダに住んでいて、Tesla Model S、Model X 60、またはModel 60Dを使用している場合、車の自律性は50 km(約30マイル)高くなります。これは失敗ではなく、ハリケーンイルマによる避難作業を容易にするために会社自身が命じた自治権の一時的な延長です。

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か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language