APIGEE configuration: how to handle CORS error

I have an API Proxy configured on APIGEE Edge that throws a CORS Error and automatically turns a POST request to an OPTIONS request when OAuth Access Token Verification is enabled.

I have tried configuring the CORS Policy at various points in the Pre and Post flows but to no avail.

TIA.

I tried adding CORS Policy and adding a Preflight Flow for handling the OPTIONS request but none of that worked.

Now I haven't yet figured it out why a POST request lands at as an OPTIONS request.

Below steps helped me to implemeted CORS configuration for apigee proxy.

1. Add a CORS policy as per the documentation.
2. Once you've added the CORS policy; in the Proxy Endpoints go to PreFlow and add your policy in Response step.
3. Add Condition(s) to all your policies attached to skip the OPTION request as shown in screenshot below.
4. Also add Flow for CORS-Preflight

You just have to add the Assign Message Policy for Preflight Call to add the correct headers for CORS Issue whose request verb would be OPTIONS.

To do this, you can add a Flow that checks the request verb, and a Route Rule that does not route the Options call to any target Endpoint because this call should only set headers and nothing else.

Your Proxy Endpoint will look something like this after that:

<PreFlow name="PreFlow">
    <Request>
        <Step>
            <Name>Some Policy</Name>
            <Condition>(request.verb != "OPTIONS")</Condition>
        </Step>
    </Request>
    <Response/>
</PreFlow>
<Flows>
    <Flow name="Option-Preflight">
        <Description/>
        <Request/>
        <Response>
            <Step>
                <Name>AM-SetCORS</Name>
            </Step>
        </Response>
        <Condition>(request.verb == "OPTIONS")</Condition>
    </Flow>
</Flows>
<PostFlow>
    <Request>
        <Step>
            <Name>Some Policy</Name>
            <Condition>(request.verb != "OPTIONS")</Condition>
        </Step>
    </Request>
    <Response/>
</PostFlow>
<HTTPProxyConnection>
    <BasePath>/demo</BasePath>
</HTTPProxyConnection>
<RouteRule name="NoRoute">
    <Condition>(request.verb == "OPTIONS")</Condition>
</RouteRule>
<RouteRule name="default">
    <TargetEndpoint>default</TargetEndpoint>
</RouteRule>

In the AM-SetCORS policy you can add this:

<AssignMessage continueOnError="false" enabled="true" name="AM-SetCORS">
    <DisplayName>AM-SetCORS</DisplayName>
    <Properties/>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">*</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, authorization, content-type, source, access-control-allow-origin, apikey, access-control-allow-credentials</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo type="response" transport="http" createNew="false"/>
</AssignMessage>

You can also add * in the Access-Control-Allow-Headers as well to allow all the headers. It mainly depends on the use case.