在对Web API进行Ajax调用时出现跨域问题

Question

我有几个项目在我的解决方案:WebApi和网页项目Web API项目使用以下Url返回一些数据:

http://localhost:63983/api/values

我的主要web项目使用另一个端口:

http://localhost:63421/#/

现在当我运行我的Web项目时，我试图对我的WebApi进行一个简单的Ajax调用这里我得到了一个非常奇怪的错误:Firebug显示状态:200OK，但它用红色标记，我没有得到任何数据。

我想这可能与跨域有关。

Answer 1

你猜对了。不允许读取不同域上的数据。域同时是domain name和port。这也适用于一个在HTTP(端口80)，另一个在HTTPS(端口443)

你可以通过在WebApi返回的内容中设置一个头值来显式地允许WebProject对你的WebApi进行AJAX调用。因此，当您对http//localhost:63983/api/values进行AJAX调用时，它应该包含http头:

Access-Control-Allow-Origin: http://localhost:63421

更多详细信息请访问:http://css.dzone.com/articles/ajax-requests-other-domains

Answer 2

您可以使用Microsoft.AspNet.WebApi.Cors nuget包在Web API中启用CORS支持

在安装了上面的包之后，使用以下配置应该可以解决您的问题。

config.EnableCors(new EnableCorsAttribute(origins: "*", headers: "*", methods: "*"));

更多信息在这里:
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api