CORS header 'Access-Control-Allow-Origin missing

Question

I'm trying to call some WCF services that I've written from a local web page, but I'm getting cross origin errors left and right, but only when I try the calls from JavaScript.

I have tried for months on and off trying to resolve this with no luck; I'm at my wits end. I've fiddled with the web.config for hours, the site's IIS Response Headers, countless blogs, other SO posts, and enable-cors.org, but I'm still hitting a brick wall.

The JS code that's calling the WCF services:

var url = "http://(foo)/WCF.svc/Bar"
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.onload = function () {
    console.log(xhr.responseText);
}
xhr.send(); 

The C# function for the WCF Service:

[OperationContract, WebInvoke(UriTemplate = "/Bar/", Method = "GET")]
public string Bar() { return "Success!"; }

The relevant segment of the Web.config for the WCF Service:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="*" />
            <add name="Access-Control-Allow-Methods" value="*" />
            <add name="Access-Control-Max-Age" value="1728000" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

As I said before, HTTP requests from other languages have no problems. C# and ActionScript 3 are working fine with the same WCF calls, but JS won't let me get past these errors.

Does anyone know what might be going on?

Answer 1

The problem is with these two lines

        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="*" />

* is not a valid value for those two headers

Read the spec here