Asp.net WebApi - CORS 策略

Question

I have Asp.net web api project as a backend and react js as front-end I'm trying to make an api requests through my React to get or post data from or to the database using the api endpoints i created an the backend.

我第一次遇到 GET 和 POST 請求的 CORS 錯誤，然后我將其添加到我的 Web.config 文件中

<system.webServer>
  <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
       <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
       <add name="Access-Control-Allow-Headers" value="Content-Type, Accept, Pragma, Cache-Control, Authorization " />
     </customHeaders>
   </httpProtocol>
  </system.webServer>

現在 GET 工作正常，但 POST 不工作

得到

public IHttpActionResult Get(string password)
        {
            if (password == "000")
            {
                using (DbModel dbModel = new DbModel())
                {
                    return Ok(dbModel.Provider_status.ToList());
                }
            }
            else
            {
                return null;
            }
        }

郵政

[HttpPost]
        public IHttpActionResult Post(List<Provider_status> rows)
        {
            try
            {
                using (DbModel dbModel = new DbModel())
                {
                    dbModel.Provider_status.AddRange(rows);
                    dbModel.SaveChanges();
                }
            }
            catch { }
            return Ok("record created");
        }

Answer 1

我已經實現了相同的但有多個來源的錯誤。 當我用逗號分隔多個來源時，我再次收到 CORs 錯誤。 所以我實現了自定義 CORS 策略提供程序。

我對 PUT 方法有同樣的問題。 解決方案是自定義 CORS 策略提供程序。

[ EnableCors ] 屬性實現ICorsPolicyProvider接口。 您可以通過創建派生自 Attribute 並實現ICorsPolicyProvider的 class 來提供自己的實現。

[AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple = false)]
public class MyCorsPolicyProvider : Attribute, ICorsPolicyProvider 
{
    private CorsPolicy _policy;

    public MyCorsPolicyProvider()
    {
        // Create a CORS policy.
        _policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true
        };

        // Add allowed origins.
        _policy.Origins.Add("http://myclient.azurewebsites.net");
        _policy.Origins.Add("http://www.contoso.com");
    }

    public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request)
    {
        return Task.FromResult(_policy);
    }
}

現在您可以將屬性應用到您將放置 [ EnableCors ] 的任何位置。

[MyCorsPolicy]
public class TestController : ApiController
{
    .. //

例如，自定義 CORS 策略提供程序可以從配置文件中讀取設置。

作為使用屬性的替代方法，您可以注冊創建ICorsPolicyProvider對象的ICorsPolicyProviderFactory object。

public class CorsPolicyFactory : ICorsPolicyProviderFactory
{
    ICorsPolicyProvider _provider = new MyCorsPolicyProvider();

    public ICorsPolicyProvider GetCorsPolicyProvider(HttpRequestMessage request)
    {
        return _provider;
    }
}

要設置ICorsPolicyProviderFactory ，請在啟動時調用SetCorsPolicyProviderFactory擴展方法，如下所示：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.SetCorsPolicyProviderFactory(new CorsPolicyFactory());
        config.EnableCors();

        // ...
    }
}

它應該可以工作，但是在您的部署之后如果它不起作用，請在您的 web.config 中添加以下配置

<system.webServer>    
  <modules>    
    <remove name="WebDAVModule" />    
  </modules>    
  <handlers>    
    <remove name="WebDAV" />  
    <remove name="OPTIONSVerbHandler" />  
    <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" requireAccess="None" responseBufferLimit="4194304" />
  </handlers>    
</system.webServer>

部署后只需執行IISRESET或重新啟動應用程序池

謝謝

Answer 2

安裝 Cors package。

1. 安裝包 Microsoft.AspNet.WebApi.Cors

2. 在您的 WebApiConfig 中啟用 Cors

    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

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

3. 像這樣裝飾你的 controller

   [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController

來源： 微軟文檔