如何修改我的Web API服务器代码以添加Access-Control-Allow-Origin'标头?

时间:2014-02-04 19:03:10

标签: jquery asp.net-web-api xmlhttprequest localhost cors

我有一个Web API应用程序,并且能够使用Windows窗体util调用其REST方法;我想从HTML / jQuery util中调用它们,并尝试按照this tutorial进行操作。

我发现信息表明我需要以某种方式在服务器端添加允许此类呼叫的指令,例如来自here

...但不知道我需要添加什么,以及在哪里,让它工作。

我在浏览器控制台(在Chrome中)收到的具体消息是:

XMLHttpRequest cannot load http://localhost:28642/api/VendorItems/GetAll. No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'http://localhost:54161' is therefore not allowed access.

我也尝试用我的机器名称和我的IP地址替换调用“localhost”,但它们都导致了同样的错误消息。

无论如何,如果奇怪/我有点敬畏,我可以从Windows窗体应用程序中调用这些方法没有问题,但是从浏览器 - whammo!

更新

我尝试在评论中提供的第一件事情,尝试将Cors软件包安装到我的Web API /服务器应用程序中,但它失败了:

PM> Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService
Install-Package : No compatible project(s) found in the active solution.
At line:1 char:1
+ Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (:) [Install-Package], InvalidOperationException
    + FullyQualifiedErrorId : NuGetNoCompatibleProjects,NuGet.PowerShell.Commands.InstallPackageCommand

PM> 

...并在NuGet GUI中搜索“Microsoft.AspNet.WebApi.Cors”的在线软件包会导致“找不到任何项目。”

1 个答案:

答案 0 :(得分:4)

here开始,我看到ASP.NET MVC / Web API有一些简单的方法。

对于ASP.NET Web API

using System;
using System.Web.Http.Filters;

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        if (actionExecutedContext.Response != null)
            actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");

        base.OnActionExecuted(actionExecutedContext);
    }
}

现在您已经定义了AllowCrossSiteJson动作过滤器属性的含义。剩下的就是将动作过滤器属性添加到您选择的控制器或方法中。

标记整个API控制器:

[AllowCrossSiteJson]
public class ValuesController : ApiController
{

或单个API调用:

[AllowCrossSiteJson]
public IEnumerable<PartViewModel> Get()
{
    ...
}

您还可以将CORS实施限制为您选择的受信任站点。您应该将"*"更改为"http://your-domain.com,http://your-domain-2.com"等。请注意逗号分隔以及原始规范中包含协议(http://或https://)。如果您要提供localhost,请确保包含端口号。

希望有所帮助! :)