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。＆＃39; Access-Control-Allow-Origin＆＃39;标头包含多个值＆＃39; http://localhost:33630，*＆＃39;，但只允许一个。起源＆＃39; http://localhost:33630＆＃39;因此不允许访问。

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

XMLHttpRequest无法加载http://localhost:4348/api/Viewer/GetSearchResult。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:33630＆＃39;因此不允许访问。响应的HTTP状态代码为500。

将contentType设置为application/json; charset=utf-8会触发OPTIONS类型的预检请求。在Visual Studio的某个地方，它在http://localhost:33630个请求上添加了对GET的权限，但在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。

安装nuget Microsoft.AspNet.WebApi.Cors

在WebApiConfig.cs中启用cors

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

这将启用CORS gloablly，你可以装饰你的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

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

1 个答案: