Can't Get Add-CORS policy to add Access-Control-Allow-Origin header

Google Cloud Apigee
1

I am making an AngularJS app that calls my Apigee API Proxy. While testing in a Chrome browser, I keep getting this error:

XMLHttpRequest cannot load http://myapi.apigee.net/v1/etc/etc/etc. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

The API itself works fine if I do a Trace in the Apigee system.

I’ve followed the documentation and my code looks like:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <FaultRules/>
    <Flows>
        <Flow name="/etc/etc/etc-get">
            <Description/>
            <Request/>
            <Response>
                <Step>
                    <Name>Add-CORS</Name>
                </Step>
            </Response>
            <Condition>(proxy.pathsuffix MatchesPath "/etc/etc/etc") and (request.verb = "get")</Condition>
        </Flow>
        <Flow name="/etc2/etc2-get">
            <Description/>
            <Request/>
            <Response>
                <Step>
                    <Name>Add-CORS</Name>
                </Step>
            </Response>
            <Condition>(proxy.pathsuffix MatchesPath "/etc2/etc2") and (request.verb = "get")</Condition>
        </Flow>
        <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>Add-CORS</Name>
                </Step>
            </Response>
            <Condition>request.verb == "OPTIONS"</Condition>
        </Flow>
    </Flows>
    <HTTPProxyConnection>
        <BasePath>/v1</BasePath>
        <Properties/>
        <VirtualHost>default</VirtualHost>
        <VirtualHost>secure</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS"</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
    </RouteRule>
</ProxyEndpoint>

and the Add-CORS policy is:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssignMessage async="false" continueOnError="false" enabled="true" name="Add-CORS">
    <DisplayName>Add-CORS</DisplayName>
    <FaultRules/>
    <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>

What am I missing?

2 Likes
2

Dear @Comly Wilson,

I see there are two issues:

  1. The condition in the ProxyEndpoints “/etc/etc/etc-get” and “/etc2/etc2-get” is attempting to match the request.verb with “get” instead of “GET”. It is case sensitive, so this condition fails.- Modify the condition for /etc/etc/etc-get as follows:
  • /etc/etc/etc-get
(proxy.pathsuffix MatchesPath "/etc/etc/etc") and (request.verb = "get")
  • to
(proxy.pathsuffix MatchesPath "/etc/etc/etc") and (request.verb = "GET")

  • Modify the condition for /etc2/etc2-get as follows:

    • /etc2/etc2-get
    (proxy.pathsuffix MatchesPath "/etc2/etc2") and (request.verb = "get")

    • to

      (proxy.pathsuffix MatchesPath "/etc2/etc2") and (request.verb = "GET")
  1. Also as per the CORS policy documentation, we need to add the CORS policy in the response preflow of Target Endpoint and not in the Proxy Endpoint. Here is the part of the documentation that says this

Adding CORS headers to an existing proxy

You need to manually create a new Assign Message policy and copy the code for the Add CORS policy listed in the previous section into it. Then, attach the policy to the response preflow of the TargetEndpoint of the API proxy.

Please make the above modifications and CORS should work for you. I have tried this locally and it worked for me.

Thanks,

Amar