对 ASP.NET Web API 的跨域请求

Question

我有一个关于在 ASP.NET Web API 中实现 cors 的问题。 我转向 SO 的原因是我尝试到处搜索，找到了很多教程和答案，但这些似乎都不适合我。

---

设置：

• 在 XAMPP 上运行的 Web 应用程序（HTML5、JS）(192.168.1.101:8080)
• 在 IIS Express 上运行的 API (ASP.net)（与 VS2013 集成）(192.168.1.101:52126)

Web 应用程序对 API 进行 ajax 调用，如下面的代码块所示。

$.ajax({
    data: JSON.stringify(data),
    type:  'POST',
    url:   'http://localhost:52126/api/controller/action',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,
    headers:
    {
        "Authorization": "Basic Base64Encrpytion"
    },
    success: function(data)
    {
        // Handle success
    },
    error: function(data)
    {
        // Handle error
    }
});

这一切都在 localhost 中完美运行，包括 OPTION 预检。但是，当我从同一本地网络中的其他设备启动 Web 应用程序时，预检失败，当然，如果预检失败，其余调用也会被取消。

---

错误：

当尝试使用 Web 应用程序从同一网络中的另一台设备 (192.168.1.100) 查询 API 时，会生成以下响应：

控制台

OPTIONS http://192.168.1.101:52126/api/controller/action 400 (Bad Request)
OPTIONS http://192.168.1.101:52126/api/controller/action No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.101:8080/' is therefore not allowed access.
XMLHttpRequest cannot load http://192.168.1.101:52126/api/controller/action. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.101:8080/' is therefore not allowed access.

响应标头

Connection: close
Content-Length: 334
Content-Type: text/html; charset=us-ascii
Date: Wed, 05 Mar 2014 09:29:46 GMT
Server: Microsoft-HTTPAPI/2.0

在 localhost 上测试 Web 应用程序和 API 时，响应标头确实包含 Access-Control-Allow-Origin "*" 标头。

---

我尝试过的解决方案：

将以下代码添加到需要从域外访问的每个类中。

[EnableCors(origins: "*", headers: "*", methods: "*")]

将以下代码添加到 Web.config 文件中。

<httpprotocol>
  <customheaders>
    <add name="Access-Control-Allow-Origin" value="*"></add>
  </customheaders>
</httpprotocol>

将以下代码添加到 WebApiConfig 文件中。

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

将以下代码添加到 applicationhost.config

<binding protocol="http" bindingInformation="192.168.1.101:52126:*" />

以下设置设为true

jQuery.support.cors = true

我也尝试过覆盖预检处理程序，但这似乎也失败了。

Answer 1

在这个问题上浪费了两天时间，我想我已经解决了。

由于我在公司网络中的工作站上进行开发，因此我没有本地管理员权限。这意味着我必须在管理员模式下运行 Visual Studio 2013。 That way IIS Express can run on the network instead of only localhost.

在 applicationhost.config 我做了以下：

<binding protocol="http" bindingInformation="*:50157:localhost" />
<binding protocol="http" bindingInformation="*:50157:192.168.1.101" />

这显然失败了，因为它们都被分配到同一个端口。所以我把它改成：

<binding protocol="http" bindingInformation="*:50157:localhost" />
<binding protocol="http" bindingInformation="*:50158:192.168.1.101" />

TL;DR

• 确保在管理员模式下运行 Visual Studio 或仅获取本地管理员权限。
• 为每个 ip 使用不同的端口。