How to use proxy path chaining to add CORS to all your proxies in an organization.

Google Cloud Apigee Knowledge Hub
1

Tired of copying and pasting your existing CORS policies across API proxies, just to support testing in http://apistudio.io/ or http://swagger.io/?

I created a CORS proxy and used proxy path chaining to front all my other APIs!

I set the proxy basepath to “/cors” and the target path to “/”.

Then prefix each call with /cors, by simply changing the basepath in the OpenAPI Spec.

Example:

GET /myproxybasepath/resources

GET /cors/myproxybasepath/resources

Here’s my proxy configuration, note the location of CORS policies in the PreFlow for all requests.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <FaultRules/>
    <PreFlow name="PreFlow">
        <Request>
            <Step>
                <Condition>(request.verb = "OPTIONS")</Condition>
                <Name>JS-Extract-CORS-Headers</Name>
            </Step>
            <Step>
                <Condition>(request.verb = "OPTIONS")</Condition>
                <Name>RF-CORS</Name>
            </Step>
        </Request>
        <Response/>
    </PreFlow>
    <Flows/>
    <HTTPProxyConnection>
        <BasePath>/cors</BasePath>
        <VirtualHost>default</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
    </RouteRule>
    <PostFlow name="PostFlow">
        <Request/>
        <Response>
            <Step>
                <FaultRules/>
                <Name>AM-CORS</Name>
            </Step>
        </Response>
    </PostFlow>
</ProxyEndpoint>

Here’s my target configuration, note the use of success.codes to be able to see error responses in API studio.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<TargetEndpoint name="default">
    <Description/>
    <Flows/>
    <PreFlow name="PreFlow">
        <Request/>
        <Response/>
    </PreFlow>
    <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
    <LocalTargetConnection>
        <Properties>
            <Property name="success.codes">1xx,2xx,3xx,4xx,5xx</Property>
        </Properties>
        <Path>/</Path>
    </LocalTargetConnection>
</TargetEndpoint>

More info on proxy chaining here: http://docs.apigee.com/api-services/content/connecting-proxies-other-proxies.

CORS proxy attached (cors-chaining.zip).