API Proxy returns 200 but Response is empty when we make a call from different Origin

Not applicable

When I make a call to my API from my application which is on a different domain, the origin information is being sent across and the API Proxy has CORS Policy setup to handle this origin, however the response comes as blank for some reason.

It works perfectly fine when I make the call from the same origin via the browser !

Can somebody please suggest as to why this is happening ?

0 3 2,248
3 REPLIES 3

adas
Participant V

@Vivek How are you making these API calls. Typically the browser (user agent) would make a pre-flight OPTIONS call to the API endpoint, for a cross origin request and based on the response from the OPTIONS call it would issue the actual request. In this case, it looks like either the origin is not allowed, or particular methods are not allowed. We need to look at the sample response that you are getting from the API.

When CORS is enabled on the API endpoint, you would usually see the following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: origin, x-requested-with, accept, content-type
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET, PUT, POST, DELETE

This means that all cross origin requests are allowed (*). The listed headers and methods are allowed. If your request is sending any other headers which is not allowed, then you would see an error in your browsers console.

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>

angular:

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

obtenerCatalogos():Observable<any> { return this.httpClient.get<any>(uriApigee+'endpointapigee',httpOptions2); }

Regars

Please go through this document. It might help. https://docs.apigee.com/api-platform/antipatterns/disable-persistent-connections.

Try adding this after the URL of Target endpoint

<Properties>
  <Propertyname="keepalive.timeout.millis">0</Property>
</Properties>