How do I modify my Web API server code to add a Access-Control-Allow-Origin' header?

Question

I have a Web API app and am able to call its REST methods with a Windows forms util; I want to call them from an HTML/jQuery util, too, and tried to do so by following along with this tutorial.

And I find info that indicates that I need to somehow add a directive on the server side allowing this type of call, such as from here.

...but do not know exactly what I need to add, and where, to get this to work.

The specific message I get in the browser Console (in Chrome) is:

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.

I also tried replacing calling "localhost" with my machine name, and with my IP Address, but they all lead to that same err msg.

At any rate, it's kind if odd/I'm kind of awed that I can call those methods from a Windows Forms app with no problem, but from a browser - whammo!

UPDATE

I tried to do the first thing necessary in the link provided in the comment, by trying to install the Cors package into my Web API/server app, and it failed:

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>

...and searching Online packages in the NuGet GUI for "Microsoft.AspNet.WebApi.Cors" results in "No items found."

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api — Kevin B, Feb 04 '14 at 19:05
Note my update above; trying to follow the first step from that link ("To enable CORS in Web API, use the Microsoft.AspNet.WebApi.Cors package, which is available on NuGet.") fails ignominiously. — B. Clay Shannon-B. Crow Raven, Feb 05 '14 at 17:32
Are you working with ASP.NET? I would like to know your MVC version if you use one. — artfuldev, Feb 20 '14 at 05:16

score 4 · Accepted Answer · edited May 23 '17 at 11:47

From here, I see that there are simple ways with ASP.NET MVC/Web API.

For 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);
    }
}

So now you have defined what an AllowCrossSiteJson Action Filter Attribute means. The rest is just a matter of adding the Action Filter Attribute to the controllers or methods of your choice.

Tag a whole API controller:

[AllowCrossSiteJson]
public class ValuesController : ApiController
{

Or individual API calls:

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

You could also restrict the CORS implementation to your selection of trusted sites. You should just change the "*" to "http://your-domain.com,http://your-domain-2.com" etc. Note the comma separation and the inclusion of the protocol (http:// or https://) in the origin specification. If you are providing localhost, make sure the port number is included.

Hope that helps! :)

How do I modify my Web API server code to add a Access-Control-Allow-Origin' header?

UPDATE

1 Answers1

For ASP.NET Web API

Tag a whole API controller:

Or individual API calls:

Linked