如何使用http-client向Aurelia请求跨域

Question

I have a simple Data Resource that retrieves a flat json file from within my own project. When I try to replace the url with that of a Working API end point that I have running on a separate domain I get a 401 (Unauthorized) error in chrome.

SETUP: I have a Visual Studio solution with two projects.

1) RateAppAPI (WebAPI Project w/ AspNet.cors )
2) RateAppClient (ASPNET 5 Template w/ Aurelia )
3) I have both a flat file and an API endpoint serving up the same json document. You will see one commented in the code and the other un-commented.

1. The API project is serving my GetAll route with no problems, I can hit the endpoint using postman and I get back a large result of Json. I have CORS enabled and setup properly, I have ruled that out as an issue.
2. I have the client project running Aurelia in the wwwroot directory and I am using aurelia-http-client which I will provide the code for, but I will tell you that the example I will provide works with no problems using the flat file that I have in a directory within the client project.
3. As long as I point the Get() request at the flat file within my own project (of course) I have no issues pulling in the data and working with it. It is only when I switch the url to point at the endpoint that is on a different domain that I get a 401 (Unauthorized) error.

Here is my code (an ES6 Aurelia module) that is the Data Resource:

import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

let baseURL = "http://localhost/RateAppAPI/api/UtilZip/ByUtil/7";
//let baseURL = "../api/utilzip/utilzip.json";

@inject(HttpClient)

export class UtilZipData {

constructor(httpClient) {
    this.http = httpClient;
    this.http.configure(x => { x.withCredentials(); });
}

getAll() {
    return this.http.get(baseURL)
        .then(response => {
            return response.content;
        });
    }
}

At the end of the day, I need to figure out how to use only Windows Auth and be able to run a client application from one domain, lets call that domain localhost:1234 and access a different domain, lets call the API domain localhost/RatAppAPI The API will have CORS enabled using the following method:

public static void Register(HttpConfiguration config)
{
    var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*");
    config.EnableCors(cors);
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

Answer 1

The first thing you should try is dropping the trailing forward slash in the origin. I am pretty sure that is what is causing some issues for you:

var cors = new EnableCorsAttribute("http://localhost:1234/", "*", "*");
//Should be the following instead
var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*");

Also assuming you are going to be hosting on IIS and you are looking to apply the same CORS policy globally to all your controller actions, then you can do it from the config as well:

<configuration>
    <system.webServer>
       <httpProtocol>
           <customHeaders>
               <add name="Access-Control-Allow-Origin" value="http://localhost:1234" />
               <add name="Access-Control-Allow-Methods" value="*" />
               <add name="Access-Control-Allow-Headers" value="*" />
           </customHeaders>
       </httpProtocol>
    </system.webServer>
</configuration>

Also the IIS Options handler may interfere with things, so make sure that it is removed ie

<system.webServer>
    <handlers>
    ...
       <remove name="OPTIONSVerbHandler"/>
    ...
    </handlers>
</system.webServer>

As a last resort you can also try disabling CORS security in chrome by either starting it with the following arguments --disable-web-security --user-data-dir or creating an alias in your host file for localhost and using that instead.This shouldn't really be required if all the headers have been set properly though.

Another thing, since you are looking to send through credentials, you won't be able to use a wildcard for the allowed domain. I guess that goes without saying :). With that being said you may also need to do the following:

var cors = new EnableCorsAttribute("http://localhost:1234", "*", "*")
{
    SupportsCredentials = true
};

Answer 2

I ended up using the following in my API Global.asax

public void Application_BeginRequest(object sender, EventArgs e)
        {
    string httpOrigin = Request.Params["HTTP_ORIGIN"] ?? "*";

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin);

    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, dataType");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");

    if (Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.StatusCode = 200;
        var httpApplication = sender as HttpApplication;
        httpApplication?.CompleteRequest();
    }
}