CORS error when apigee debug gives 200 response

Google Cloud Apigee
1

When I do network inspect I am seeing CORS error in the network trace.

However, when I check the same call in Apigee debug trace I can see it is completed with 200 response.

There are two calls in both the traces . One is preflight and other is the main GET call.

In Apigee trace both the call responses are 200.

However in network trace, preflight is giving 200 response, but the main call gives CORS error. I have already added CORS policy in preflow response of target endpoint and also have separate conditional flow for option preflight.

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

You may be experiencing an issue due to your AssignMessage policy using the <Add> element instead of <Set>. This behavior is documented on the docs and the community. Try using the policy like this instead -

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

If this does not fix your issue, I recommend you use Chrome Developer Tools to capture the errors as they will be written to the console. This should give you a clear indication on why the browser is not accepting the response.

Also, if you’re using Apigee X/hybrid, CORS is available as a out of the box policy. More information available on that here.