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.

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.