Apigee OPTIONS 404 - cross-domain

Question

I have been stumped by Apigee's CORS support. I setup a new proxy and made sure to tick the " Enable Direct Browser Access for Your API — Allow direct requests from a browser via CORS." box.
It appears that CORS is working for the normal GET requests, however pre-flight OPTIONS requests are not found and are returning a 404. I found this answer but was not able to resolve my problem because it seems like a different problem perhaps?
The main question I would like answered is how do I setup Access-Control-Allow-Origin=* for all requests? Even OPTIONS requests?
Proxy Endpoints
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
<Description/>
<Flows>
<Flow name="Forecast">
<Description/>
<Request/>
<Response/>
<Condition>(proxy.pathsuffix MatchesPath "/forecast") and (request.verb = "GET")</Condition>
</Flow>
</Flows>
<PreFlow name="PreFlow">
<Request/>
<Response/>
</PreFlow>
<HTTPProxyConnection>
<BasePath>/v1/weather</BasePath>
<VirtualHost>default</VirtualHost>
<VirtualHost>secure</VirtualHost>
</HTTPProxyConnection>
<RouteRule name="default">
<TargetEndpoint>default</TargetEndpoint>
</RouteRule>
<PostFlow name="PostFlow">
<Request/>
<Response/>
</PostFlow>
</ProxyEndpoint>
Target Endpoints
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<TargetEndpoint name="default">
<Description/>
<Flows>
<Flow name="OptionsCORS">
<Description/>
<Request/>
<Response>
<Step>
<Name>CrossOriginResourceSharing</Name>
</Step>
</Response>
<Condition>request.verb equals "OPTIONS"</Condition>
</Flow>
</Flows>
<PreFlow name="PreFlow">
<Request/>
<Response>
<Step>
<Name>CrossOriginResourceSharing</Name>
</Step>
</Response>
</PreFlow>
<HTTPTargetConnection>
<URL>https://home.nest.com/api/0.1/weather</URL>
</HTTPTargetConnection>
<PostFlow name="PostFlow">
<Request/>
<Response/>
</PostFlow>
</TargetEndpoint>
Add CORS File
<AssignMessage async="false" continueOnError="false" enabled="true" name="CrossOriginResourceSharing">
<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, OPTIONS</Header>
</Headers>
</Add>
<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
<AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>
Just in case it helps- the following is the error I get when doing my request. I'm using Chrome and have an AngularJS app. I've been able to replicate the issue using a cURL statement as well
( curl -H "Origin: localhost" --verbose http://*********-prod.apigee.net/v1/weather/forecast/12345 -X OPTIONS )
{
"url": "/api/0.1/weather/forecast/73013",
"message": "404 Not Found"
}
Thanks!

Answer 1

In your proxy.xml you add one more flow specific to OPTIONS
<Flow name="OPTIONS">
<Description>This flow is for client side applications</Description>
<Response>
<Step>
<Name>CORSResponse</Name>
</Step>
</Response>
<Condition>(request.verb = "OPTIONS")</Condition>
<Request/>
</Flow>
Now the CORSResponse.xml Policy can be like below
<AssignMessage name="CORSResponse">
<AssignTo type="response" createNew="true" />
<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
<Set>
<Headers>
<Header name="Access-Control-Allow-Origin">yourdomain.com</Header>
<Header name="Access-Control-Allow-Headers">origin, x-requested-with, x-source-ip, Accept, Authorization, User-Agent, Host, Accept-Language, Location, Referer</Header>
<Header name="Access-Control-Allow-Methods">GET, POST</Header>
</Headers>
<StatusCode>200</StatusCode>
</Set>
</AssignMessage>

Answer 2

The solution was to add a RouteRule that prevented the request from passing through to my API on OPTIONS requests.
<RouteRule name="NoRoute">
<Condition>request.verb == "OPTIONS"</Condition>
</RouteRule>
Additionally I added a flow that added CORS support to the response
<Flow name="OptionsPreFlight">
<Request/>
<Response>
<Step>
<Name>Add-CORS</Name>
</Step>
</Response>
<Condition>request.verb == "OPTIONS"</Condition>
</Flow>
And my Final Add-CORS policy
<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>