如何在Asp.Net MVC5中启用CORS [英] How to enable CORS in Asp.Net MVC5

问题描述

我在本地运行Angular 6，并在调用MVC控制器操作方法时收到CROS错误.

I am running Angular 6 in my local and getting CROS error when invoking MVC controller action method.

我试图通过在.net应用程序的web.config文件中添加以下代码行来解决此问题.但是仍然出现相同的错误.

I tried to fix this by adding below line of code in my .net application's web.config file. But still getting same error.

<httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

我不想通过禁用网络安全来运行浏览器，也不想创建一个类，因为仅在本地运行，我需要启用CORS.

I do not want to run a browser by disabling web security also I do not want to create a class since only to run in my local I need to enable the CORS.

在Web.config或Global.asax文件中，有没有最简单的方法来解决此问题.

Is there any simplest of way to fix this in Web.config or Global.asax file.

推荐答案

CORS需要3个标头才能正常工作.

CORS requires 3 headers to work correctly.

MDN文档.

您包含的标头将允许所有来源发出请求.但没有指定允许它们发出的请求，因此，所有请求都被阻止.
要允许所有来源发出特定请求，您需要包括Access-Control-Allow-Methods标头，该标头告诉浏览器该端点上Web服务器允许的请求.

The header you have included will allow all origins to make a request. But does not specify which requests they are allowed to make, and so, all requests are blocked.
To allow all origins to make specific requests you need to include the Access-Control-Allow-Methods header, which tells the browser which requests the web server is allowing on that endpoint.

根据请求的形成方式，您可能还需要包含Access-Control-Allow-Headers标头，该标头告诉浏览器允许将哪些标头发送到该端点上的Web服务器.

Depending on how your requests are formed, you may also need to include the Access-Control-Allow-Headers header, which tells the browser which headers it is allowed to send to the web server on that endpoint.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

使用所有这些，您的web.config的正确配置将是:

Using all this, the correct configuration for your web.config would be:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*"/>
                <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS"/>
                <add name="Access-Control-Allow-Headers" value="Content-Type"/>
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

这将允许您使用POST或GET访问该端点. 出于性能原因，Access-Control-Max-Age标头会告诉您的浏览器将这些结果缓存这么多秒.

Which will allow you to access that endpoint using either POST or GET. The Access-Control-Max-Age header will tell your browser to cache these results for that many seconds, for performance reasons.

此外，请确保不要在您正在运行的任何生产系统中包括此配置. 始终最好为可能需要的每个动作/控制器显式启用CORS.

Also please be sure to not include this configuration in any production system you may be running. It's always best to enable CORS explicitely for each action / controller that may need it.

这篇关于如何在Asp.Net MVC5中启用CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！