CORS is giving an error - No "Access-control-allow-origin" Header is present on requested resource

Not applicable

Hi ,

We are trying to add the CORS header but still getting the error -> No "Access-control-allow-origin" Header is present on requested resource ,

following is our cors policy ,

<?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, MaxDataServiceVersion</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>

This is our default.xml :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<ProxyEndpoint name="default">

<Description/>

<Flows>

<Flow name="OptionsPreFlight">

<Request/>

<Response>

<Step>

<Name>add-cors</Name>

</Step>

</Response>

<Condition>request.verb == "OPTIONS"</Condition>

</Flow>

</Flows>

<PreFlow name="PreFlow">

<Request/>

<Response/>

</PreFlow>

<HTTPProxyConnection>

<BasePath>/cb</BasePath>

<VirtualHost>default</VirtualHost>

</HTTPProxyConnection>

<RouteRule name="NoRoute">

<Condition>request.verb == "OPTIONS"</Condition>

</RouteRule>

<RouteRule name="default">

<TargetEndpoint>default</TargetEndpoint>

</RouteRule>

<PostFlow name="PostFlow">

<Request/>

<Response/>

</PostFlow>

</ProxyEndpoint>

Solved Solved
0 11 7,438
1 ACCEPTED SOLUTION

Ok, then I am able to replicate the error. I missed this, but you should also send back the CORS headers on the the GET request. All resources must include the CORS headers in the response, including the OPTIONS request. If you include a fault handler, then your error responses should also include CORS headers.

View solution in original post

11 REPLIES 11

Hello @Ramya S M

I'm not able to reproduce the error that you receive. Can you tell me more about when you receive the error? Is it during the OPTIONS request or during some other request? Also, please confirm from the trace that the OPTIONS requests returns 200 OK?

Hi @swilliams ,

I am getting the error for GET request and its returning a 200 OK status.

Hi @Ramya S M

The proxy config looks correct. Can you tell what are the actual values being passed for "Access-Control-Allow-Headers" ? You can find the actual values on the trace (during the OPTIONS call).

It could be possible that you are passing some other header that is not mentioned in policy (for eg. apikey, client_id, content-type, etc). If you pass, please include all of those in the policy for Access-Control-Allow-Headers header.

Hi @Sai Saran Vaidyanathan ,

These are the Request headers passed during an OPTIONS call ,

  1. Accept: */*
  2. Accept-Encoding: gzip, deflate, sdch, br
  3. Accept-Language: en-US,en;q=0.8
  4. Access-Control-Request-Headers: accept, accept-language, maxdataserviceversion
  5. Access-Control-Request-Method: GET
  6. Connection: keep-alive
  7. Host: <Host>
  8. Origin:<origin>
  9. Referer: <referer>
  10. User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.3

Ok, then I am able to replicate the error. I missed this, but you should also send back the CORS headers on the the GET request. All resources must include the CORS headers in the response, including the OPTIONS request. If you include a fault handler, then your error responses should also include CORS headers.

Thanks , the solution worked.

Hello William, As I'm new to Apigee can you please elaborate on the answer. How can I get CORS header and how can I send it back?

Thanks

Hi, Solved the issue. This can be done by adding the following code in proxy endpoint preflow:

<PreFlowname="PreFlow">
<Request/>
<Response>
	<Step>
		<Name>add-cors</Name>
	</Step>
		# This step will add cors header in your preflow request
</Response>
</PreFlow>

@Ramya S M

@williamssean -

I am seeing the exact same issue and as per solution CORS needs to be added to GET but i see that you already had that.

<Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE, OPTIONS</Header>

And your condition had OPTIONS check which is what it comes as first for preFlight.

<Condition>request.verb == "OPTIONS"</Condition>

Do you mind explaining what actually you had changed to make this work?

In the "Access-Control-Allow-Headers", add "Authorization"

jovaniac
Participant II
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

<PreFlow name="PreFlow">
<Request>
<Step>
<Name>FC-CORS</Name>
</Step>
<Step>
<Name>FC-OAuth2</Name>
</Step>
</Request>
<Response/>
</PreFlow>

Definition of flowcallout, where we invoke the sharedflow

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<FlowCallout async="false" continueOnError="false" enabled="true" name="FC-CORS">
<DisplayName>FC-CORS</DisplayName>
<FaultRules/>
<Properties/>
<SharedFlowBundle>OPTIONS-CORS-Headers-Response</SharedFlowBundle>
</FlowCallout>

definition of sharedflow

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<SharedFlow name="default">
<Step>
<Name>OPTIONS-CORS-Headers-Response</Name>
<Condition>request.verb == "OPTIONS"</Condition>
</Step>
</SharedFlow>

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"?>
<RaiseFault async="false" continueOnError="false" enabled="true" name="OPTIONS-CORS-Headers-Response">
<DisplayName>OPTIONS CORS Headers Response</DisplayName>
<Properties/>
<FaultResponse>
<Set>
<Headers>
<Header name="Access-Control-Allow-Origin">*</Header>
<Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, ucsb-api-key, ucsb-api-version, authorization</Header>
<Header name="Access-Control-Max-Age">3628800</Header>
<Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
</Headers>
<Payload contentType="text/plain"/>
<StatusCode>200</StatusCode>
<ReasonPhrase>OK</ReasonPhrase>
</Set>
</FaultResponse>
<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
</RaiseFault>

Regars