web-dev-qa-db-ja.com

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

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

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で述べたように、それはうまく機能しますが、axios POSTリクエストを行うと、ブラウザのコンソールで次のように表示されます：

cORSポリシーによってブロックされています：プリフライトリクエストへの応答はアクセス制御チェックに合格しません：HTTP okステータスがありません。

goaxios
16
GGG

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

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月）：これに gorilla を使用するようになりました。彼らのものはより積極的に維持されており、彼らはこれを本当に長い間行ってきました。念のため、古いリンクへのリンクを残します。

以下の古いミドルウェアの推奨事項：もちろん、これにはミドルウェアを使用する方が簡単でしょう。使用したとは思わないが、 this one が強く推奨されるようだ。

13
threeve

ASP.NET Web APIでクロスオリジンリクエストを有効にする クリックして詳細を表示

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

Install-Package Microsoft.AspNet.WebApi.Cors

このコマンドは、最新のパッケージをインストールし、コアWeb APIライブラリを含むすべての依存関係を更新します。 -Versionフラグを使用して、特定のバージョンをターゲットにします。 CORSパッケージには、Web API 2.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...
    }
}

ASP.NET Coreでクロスオリジンリクエスト（CORS）を有効にする

2
Usman Mahmood

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

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

0
JAD