Get hands-on experience with 20+ free Google Cloud products and $300 in free credit for new customers.

Unable to get CORS to work in Google Chrome

Not applicable

Hi, I am trying to get CORS to work in Google Chrome, but till now unsuccesfully.

I have the following policies:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <FaultRules/>
    <PreFlow name="PreFlow">
        <Request>
            <Step>
                <Name>Spike-Arrest</Name>
            </Step>
            <Step>
                <Name>Verify-API-Key-1</Name>
            </Step>
            <Step>
                <Name>remove-query-param-apikey</Name>
            </Step>
            <Step>
                <Name>Quota</Name>
            </Step>
        </Request>
        <Response>
            <Step>
                <Name>add-cors</Name>
            </Step>
        </Response>
    </PreFlow>
    <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
    <Flows>
        <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
            <Condition>request.verb == "OPTIONS"</Condition>
        </Flow>
        <Flow name="All">
            <Description>...</Description>
            <Request/>
            <Response/>
            <Condition>(proxy.pathsuffix MatchesPath "/") and (request.verb = "GET")</Condition>
        </Flow>    
    </Flows>
    <HTTPProxyConnection>
        <BasePath>...</BasePath>
        <Properties/>
        <VirtualHost>...</VirtualHost>
        <VirtualHost>...</VirtualHost>
        <VirtualHost>...</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS"</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>...</TargetEndpoint>
    </RouteRule>
</ProxyEndpoint>

and

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<TargetEndpoint name="Batch">
    <Description/>
    <FaultRules/>
    <Flows/>
    <HTTPTargetConnection>
        <LoadBalancer>
            <Server name="..."/>
        </LoadBalancer>
        <Path>...</Path>
        <SSLInfo>
            <Enabled>...</Enabled>
            <ClientAuthEnabled>...</ClientAuthEnabled>
            <KeyStore>...</KeyStore>
            <KeyAlias>...</KeyAlias>
            <TrustStore>...</TrustStore>
        </SSLInfo>
    </HTTPTargetConnection>
    <PreFlow name="PreFlow">
        <Request/>
        <Response>
            <Step>
                <Name>add-cors</Name>
            </Step>
        </Response>
    </PreFlow>
    <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
</TargetEndpoint>

and the following Javascript:

jQuery.ajax({
		url : '...',
		type : 'GET',
		beforeSend: function (request)
        {
			request.setRequestHeader("apikey", key),
		success : function(result){
			console.log(result);
		},
		error : function(result){
			console.log(result);
		}
	});

And the following add-cors policy:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssignMessage async="false" continueOnError="false" enabled="true" name="add-cors">
    <DisplayName>Add CORS</DisplayName>
    <FaultRules/>
    <Properties/>
    <Add>
        <Headers>
            <Header name="Access-Control-Allow-Origin">*</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, apikey, authorization</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
        </Headers>
    </Add>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

And this is the answer I get in the console:

OPTIONS https://.. 401 (Unauthorized)

XMLHttpRequest cannot load ... . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access. The response had HTTP status code 401.

Any help is appreciated!

0 11 6,578
11 REPLIES 11