.Net MVC API Access-Control-Allow-Origin 在 Ajax POST 请求时出错

Question

我在 VS2013 中有一个 .Net 解决方案，在不同的端口上有多个项目。我在其中两个项目之间来回发送数据，主要是 localhost:4348 上的 API 项目和 localhost:33630 上的前端项目。

我正在使用 jQuery 对 API 进行 ajax 调用并通过 POST 请求发送数据，这是 POST 请求的一个示例：

$.ajax({
    type: "POST",
    url: 'http://localhost:4348/api/Viewer/GetSearchResult',
    data: searchObject,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (responseData, textStatus, jqXHR) {
        console.log(responseData);
    },
    error: function (responseData, textStatus, errorThrown) {
        console.log("Text status:", textStatus);
    }
});

searchObject 结构如下，它的项目在 ajax 调用之前的某个时间点被填充：

searchObject.generalSearchList = [];
searchObject.indexesSearchList = [];
searchObject.searchType = '';
searchObject.language = '';
searchObject.id = '';
searchObject.selector = '';

API 项目不允许我将以下设置添加到 Web.config 文件：

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

这样做会在我尝试调用的任何 API 上引发此错误：

XMLHttpRequest 无法加载 http://localhost:4348/api/Viewer/GetTrees?Lang=en-US。 “Access-Control-Allow-Origin”标头包含多个值“http://localhost:33630, *”，但只允许一个值。 Origin 'http://localhost:33630' 因此不允许访问。

因此，如果没有设置该选项，当我尝试使用 POST 方法调用 API 时，会出现以下错误：

XMLHttpRequest 无法加载 http://localhost:4348/api/Viewer/GetSearchResult。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:33630' 不允许访问。响应的 HTTP 状态代码为 500。

将contentType 设置为application/json; charset=utf-8 会触发OPTIONS 类型的预检请求。 在 Visual Studio 的某个地方，它在 GET 请求上添加了对源 http://localhost:33630 的权限，但在 OPTIONS 请求上没有添加权限。而且我无法覆盖我在 Web.config 文件中提到的权限。

在这里发帖之前，我已经做了很多研究，测试了很多场景，包括添加

<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />

到 API 项目中的 web.config 文件。

不用说，我迫切希望了解错误的原因并解决它，因为我已经被这个问题困扰了大约一周。在 Chrome 和 Firefox 上测试。

Answer 1

您也可以在 WebApiConfig.cs 中启用 CORS。

1. 安装nugetMicrosoft.AspNet.WebApi.Cors

2. 在 WebApiConfig.cs 中启用 cors

   public static class WebApiConfig
   {
       public static void Register(HttpConfiguration config)
       {
           var cors = new EnableCorsAttribute("*", "*", "*");
           config.EnableCors(cors);
           // Other config lines
       }
   }
   

这将使 CORS 全局启用，您可以使用 api 控制器甚至单个 api 方法来装饰

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

针对特定的控制器或方法。 您可以在 WebAPI 项目中阅读有关启用 CORS 的更多信息 http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api