javascript - 对 ASP.NET Web API 的跨域请求

Question

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

---

设置:

• 在 XAMPP (192.168.1.101:8080) 上运行的 Web 应用程序(HTML5、JS)
• 在 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

在本地主机上测试 Web 应用程序和 API 时，响应 header 确实包含Access-Control-Allow-Origin“*” header 。

---

我尝试过的解决方案:

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

[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" />

长话短说

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