CORS error - Request header field x-apikey is not allowed by Access-Control-Allow-Headers in preflight response

hj2509
Participant I

Clients send a request with their API key in the header. The filed name is "x-apikey". And I am trying to enable CORS but I get on the console

Request header field x-apikey is not allowed by Access-Control-Allow-Headers in preflight response

Upon tracing, I found that I got 200 OK response for the preflight Options but it seems the subsequent GET request was not made. I think that was because of the CORS error above.

Here is my 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>
    <Properties/>
    <Add>
        <Headers>
            <Header name="Access-Control-Allow-Origin">*</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept</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 my config

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <FaultRules/>
    <DefaultFaultRule name="all">
        <AlwaysEnforce>true</AlwaysEnforce>
        <Step>
            <Name>add-cors</Name>
        </Step>
    </DefaultFaultRule>
    <Flows>
        <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
            <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
        </Flow>
    </Flows>
    <PreFlow name="PreFlow">
        <Request>
            <Step>
                <Name>verify-api-key</Name>
                <Condition>request.verb != "OPTIONS"</Condition>
            </Step>
            <Step>
                <Name>remove-query-param-apikey</Name>
                <Condition>request.verb != "OPTIONS"</Condition>
            </Step>
        </Request>
        <Response/>
    </PreFlow>
    <HTTPProxyConnection>
        <BasePath>/helloapikey_test</BasePath>
        <VirtualHost>secure</VirtualHost>
        <VirtualHost>default</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
    </RouteRule>
    <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
</ProxyEndpoint>

And this is the error that I get

10124-5.jpg

Can anybody see what I might be doing wrong? and what should I do to fix this? Thank you!

Solved Solved
0 4 14.9K
1 ACCEPTED SOLUTION

@hyun jeon,

You need to add the x-api-key in the list of allowed headers in the add-cors assign message policy.

<Headername="Access-Control-Allow-Headers">origin, x-requested-with, accept, x-api-key</Header>

View solution in original post

4 REPLIES 4

@hyun jeon,

You need to add the x-api-key in the list of allowed headers in the add-cors assign message policy.

<Headername="Access-Control-Allow-Headers">origin, x-requested-with, accept, x-api-key</Header>

I have the exact same issue and still get the same result from our Apigee site. In my case, it is "x-apikey" just like the author and have added the same details, but still get the x-apikey error in the browser.

You can use the trace feature in the API Proxy to see the individual requests coming to the API, which policies are executing, and the response being returned to the browser. This can be used together with the network view in your browser's developer tools.

You can use this to validate the policy configurations, policy flow/conditions lead to the expected response being generated. Hopefully this can help debug this as it sounds like it might be a missing value in the allow-headers.

Basically, using ajax with local resources doesn't work.

Chrome and Safari has a restriction on using ajax with local resources. This error means that you are trying to perform Ajax on a local file. This is forbidden for security reasons.

In order to solve this problem, you can use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;

--allow-file-access-from-files

Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:

<script>
$.support.cors = true;
</script>