CORS preflight issue with apikey verfication failed.

Google Cloud Apigee
1 
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <FaultRules/>
    <PreFlow name="PreFlow">
        <Request>
            <Step>
                <Name>verify-api-key</Name>
            </Step>
        </Request>
        <Response/>
    </PreFlow>
    <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
    <Flows>
        <Flow name="PostTest">
            <Description/>
            <Request/>
            <Response/>
            <Condition>(proxy.pathsuffix MatchesPath "/testFlow") and (request.verb = "POST")</Condition>
        </Flow>
        <Flow name="CORS preflight">
            <Description>CORS preflight</Description>
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
            <Condition>request.verb = 'OPTIONS'</Condition>
        </Flow>
    </Flows>
    <HTTPProxyConnection>
        <BasePath>/mytesting/v1</BasePath>
        <Properties/>
        <VirtualHost>secure</VirtualHost>
        <VirtualHost>default</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS"</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
    </RouteRule>
</ProxyEndpoint>

This is my header configuration:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssignMessage async="false" continueOnError="false" enabled="true" name="add-cors">
    <DisplayName>Add CORS</DisplayName>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">{request.header.origin}</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, content-type, user-agent, apikey</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, POST</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

Plz help me on this
2 Likes
2

@Neha Since you have a Verify API Key policy in the Proxy PreFlow section, this policy is applied to all the incoming requests. If you don’t want to apply the Verify API Key for preflight requests… add a condition to skip when method is “OPTIONS”

Your proxy configuration should look like this -

    <PreFlow name="PreFlow">
        <Request>
            <Step>
                <Name>verify-api-key</Name>
                <Condition>request.verb != "OPTIONS"</Condition>
            </Step>
        </Request>
        <Response/>
    </PreFlow>
3 Likes
3

Hey, It worked.Thanks a ton :slight_smile:

4

Hi @sudheendra1 thank you, this workshop indeed. But is there still a way to verify the api key in preflight requests?

Thank you!

5

Hi @sudheendra1 thank you, this workshop indeed. But is there still a way to verify the api key in preflight requests?

Thank you!

6

This was really helpful as we had the same issue. This nuance seems important to include in the API Key Verification policy documentation or the documentation on CORS

7 
hey guys, I implemented something like that and it served me correctly.


In the proxy enpoint we must place in the preflow the next call of a Flowcallout to invoke a sharedflow which will have the policy of CORS
FC-CORS FC-OAuth2 
Definition of flowcallout, where we invoke the sharedflow
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> FC-CORS OPTIONS-CORS-Headers-Response 
definition of sharedflow
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> OPTIONS-CORS-Headers-Response request.verb == "OPTIONS" 
definition of the policy of raisefull, where we will indicate the headers of Access-Control-Allow-Origin with * that will allow the invocation from our browser
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> OPTIONS CORS Headers Response * origin, x-requested-with, accept, ucsb-api-key, ucsb-api-version, authorization 3628800 GET, PUT, POST, DELETE 200 OK true

angular:

const httpOptions2= { headers:newHttpHeaders({ ‘Authorization’:‘Bearer token’ }) };

obtenerCatalogos():Observable { return this.httpClient.get(uriApigee+‘endpointapigee’,httpOptions2); }

Regars

8

For this validation in place, does it mean that request from browser doesn’t send custom headers during OPTIONS request? What I’m thinking is that APIgee needs to validate the API Key passed from the options request.