Why can't I set request headers to apigee proxy from a locally running angular app

[anvimalia]

Hi,

I have a simple angular app and I am trying to call my apigee proxy but it fails at verifying the api key. When I trace it, I realize my request headers were not being set.. Thinking I'm doing something wrong in setting headers from my client angular app, I tried setting headers for a non-apigee url. I did some research and looks like its some CORS issue. and i followed the steps mentioned.. but still no luck

The error I get is

XMLHttpRequest cannot load <apigee-proxy-url>. 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8000' is therefore not allowed access.

The response had HTTP status code 401.

[#2]

Hi @Anvi, the implementation of CORS needs to meet OPTION verb and a few headers included in the image below. I think you're on the right path checking with trace and developer tools from your browser to make sure that your API Proxy supports the resources and verbs required. For instance, if you observe 404 response codes, you need to ensure that your API Proxy flows include these verbs with their respective response headers.

Please check it out and let us know if you get stuck with anything.

[DChiesa]

For example, @Anvi , here is how I handle CORS requests in one of my Apigee Edge proxies:

I have a flow in the proxy endpoint like this:

<Flow name='CORS preflight'>
  <Description>CORS preflight</Description>
  <Request>
    <Step>
      <Name>RaiseFault-InvalidRequest</Name>
      <Condition>request.header.origin is null</Condition>
    </Step>
  </Request>
  <Response>
    <Step>
      <Name>AssignMessage-CorsPreflightFullResponse</Name>
    </Step>
  </Response>
  <Condition>request.verb = "OPTIONS"</Condition>
</Flow>

Then, the CorsPreflightFullResponse is like this:

<AssignMessage name='AM-CorsPreflightFullResponse'>
  <IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
  <Set>
    <Headers>
      <Header name='Access-Control-Allow-Origin'>*</Header>
      <Header name='Access-Control-Allow-Headers'>Origin, X-Requested-With, Content-Type, Accept</Header>
    </Headers>
    <Payload contentType='application/json'
             variablePrefix='%' variableSuffix='#'><![CDATA[{
  "message" : "ok",
  "system.uuid" : "%system.uuid#",
  "now" : "%system.time#"
}
]]></Payload>
    <StatusCode>200</StatusCode>
    <ReasonPhrase>OK</ReasonPhrase>
  </Set>
</AssignMessage>


 

But you might need additional Access-Control-* headers to specify verbs, and so on.

[#4]

@Dino

I am having the same issue, it is getting OPTION ( but from my angular app , I sent POST request with apikey as header) and giving 401 Unauthorized Error bz it fails at verifying the api key. and also giving CORS error.

As per your answer, you mean I need to add a flow for option verb as well .

Can you please provide more details and help me on this?

[DChiesa]

Yes, that is what I mean. When you run an app inside a browser that sends requests to an origin (server) that is not the same as the origin server, then the browser will use CORS. What this means is the broser will implicitly send extra HTTP requests, to check whether the API server (which in this case is Apigee Edge) will agree to be called by a browser. This extra call is sometimes known as the "CORS preflight request". And your API proxy must explicitly handle it.

What I mean is: if your app explicitly sends a POST, then the browser will also implicitly send an OPTIONS call, before sending the POST. And you must design the API proxy to handle the OPTIONS call.

The flow I use, you can see above.

As always, when you have a new question, as a new question, instead of asking in the comments field of an old question.

[anvimalia]

Hi @Dino

@Dino thanks for your answer. I did do this .. and it works for one endpoint but other endpoints i still get access-control issue .. Looks like the first time its called .. it sends option.. but because of the policy added it allows access but any other endpoint is going directly and since the add cors is added only if reuqest is options.. it doesnt allow access or solves CORS for other endpoints.. i added one more add cors step in target flow response .. the first one stopped working complaining about multiple origins in the header.. super confused.. any help will be appreciated

[DChiesa]

yes - you need to send CORS headers with all responses, including but not limited to the preflight response.

[#8]

Hi @Anvi,

You may want to check this thread https://community.apigee.com/questions/3138/cors-policy-in-my-api-proxy-when-using-oauth-20.html and use the proxy bundle that I attached as a reference.

[#9]

Is your issue solved ?