CORS 策略已阻止從來源“http://localhost:4200”訪問位於“http://localhost:54111/RegisterController”的 XMLHttpRequest

Question

我知道關於這個話題還有其他一些問題，但沒有答案可以幫助我。 我正在嘗試將注冊表單的數據從 Angular Cli 項目發送到我的 MVC 服務器端項目。 到目前為止我做了什么：

上Angular，報名function：

import { Component, OnInit, Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Route, Router } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { HttpClient } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  ngOnInit() {}
  
 data: any;

   constructor(private snackBar:MatSnackBar, private router: Router, private http:HttpClient){}

   onSubmitRegistration(users: {rEmail: string, rPassword: string, rRepeatPassword: string}){
      console.log(users);

          this.http.post('http://localhost:54111/RegisterController', users, {withCredentials: true}).subscribe(data => {
            console.log(data);
  })
      
   }

   login() {
    //login code
   }
 }

在 MVC 服務器端，RegistrationController：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http.Headers;
using System.Web.Http;
using System.Web.Http.Cors;
using static ServerSide.Controllers.RegisterController;

namespace ServerSide.Controllers
{
    [Route("Register")]
    public class RegisterController : ApiController
    {
        string emailRegister;

        public class Data
        {
            public string email { get; set; }
            public string password { get; set; }
            public string repeatPass { get; set; }
        }

        [HttpPost, AllowCrossSite]
         [EnableCors(origins: "http://localhost:4200/login", headers: "*", methods: "*")]
        [Route("api/Register/Posthdf")]
        public IHttpActionResult Posthdf([FromBody] string data)
        {
            if (!ModelState.IsValid) 
                return BadRequest("Date invalide");

            //emailRegister = d.email;
            System.Diagnostics.Debug.WriteLine("***EmailRegister " + data + "***");
            return Ok("lalala");
        }
    }
}

WebApiConfig.cs 包含以下內容：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace ServerSide.App_Start
{
    public class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.EnableCors();
          //  config.MapHttpAttributeRoutes();

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

同樣在服務器端項目中，我有一個名為 AllowCrossSiteAttribute 的 class，其內容如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ServerSide.Controllers
{
    public class AllowCrossSiteAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
              filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            //  filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://82.76.132.129:4400");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200/login");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:54111/api/Register");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE,PUT");
           // filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://127.0.0.1:2000");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Authorization");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true");
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
            base.OnActionExecuting(filterContext);
        }
    }
}

當我單擊注冊按鈕時，出現此錯誤：

你能告訴我我錯過了什么嗎？

Answer 1

您需要通過在 program.cs 文件中添加以下代碼來在您的應用程序中設置 cors 策略。

string[] origins = builder.Configuration.GetSection("MyConfig").GetSection("AllowedOrigins").Value.Split(";");
builder.Services.AddCors(option =>{option.AddPolicy("CorsPolicy",builder => 
builder.WithOrigins(origins).AllowAnyMethod().AllowAnyHeader());
option.AddPolicy("AllowAll",builder => 
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());});

put MyConfig section in your appsettings.json with all your allowed origin urls.

Answer 2

你應該做 3 件事才能使用 Angular 向你的 Do.net 項目發送 CORS 請求

1- 在服務器端啟用 CORS（根據您的 URL 的所有 OPTIONS 請求都應返回 200 代碼以及與 CORS 相關的標頭（允許的來源，允許的標頭）

見： 這里

2- 在您的 Angular 項目中啟用允許的來源（您應該將要發送請求的來源列入白名單）

3- 在發送請求時，請小心使用 access-control-allow-headers 中允許的標頭。

PS：不要在生產環境中對 CORS 選項使用通配符。 （它會導致嚴重的安全問題）

Answer 3

Controller 方法應該返回 200 OK

首先，當使用 ASP.NET Core/Framework 時，您的 API controller 方法應返回200 OK成功狀態代碼，以便將 CORS header 發送到客戶端。 要驗證這一點，您可以使用來自網絡瀏覽器F12的 DevTools 攔截網絡請求，並在 PostMan 或類似工具中復制網絡請求。 確保您的 API 返回200 OK狀態碼。

檢查是否存在Access-Control-Allow-Origin響應 header

然后你可以查看是否從 API 收到了Access-Control-Allow-Origin響應 header。

配置你的 API

如果您沒有從 API 收到Access-Control-Allow-Origin header，您應該對其進行配置。

對於 .NET 核心，你可以看看@Albert的回答。 對於 .NET 框架，文檔在此處。

在文件WebApiConfig.cs 中，您需要將以下內容添加到public static void Register （感謝Ionut指出這一點：！）：

config.EnableCors();

由於您的客戶端（角度應用程序）是運行在http://localhost:4200/的 atm 並將 AJAX 調用發送到https://localhost:54111/.... ，您需要通過裝飾 controller 來配置您的 api具有以下屬性的方法 (.NET Framework)

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

額外的

由於您對http://localhost:54111/api/Register的后請求返回415 (Unsupported Media Type)看起來您正在將 json 發布到您的 controller 方法，但未指定Content-Type: application/json header 在請求中（在客戶端中）。