-1

I have a vue app deployed statically. It makes requests to a server that is hosted on another url.

When making API requests. The vue app gets cors errors:

Access to XMLHttpRequest at 'https://ALB_URL' from origin 
'HTTPS://APIGATEWAYURL' has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' header is present on the requested resource.

The problem is that I get these cors errors even if the server behind the AWS ALB is down. I have confirmed with AWS support the ALB just naively forwards requests to the server and does zero CORS handling.

I then confirmed I could see options requests that should check for CORS permissions when going to youtube. Then I went to my page, and found out that zero options requests were being sent.

How can I have my vue application make an options request to the server so it can see it is allowed to make requests to it? It currently is making axios requests with the with Credentials flag as auth cookies are in the header.

axios
  .get(
    "https://ALBURL",
    {
      withCredentials: true,
    }
  )

I do not want to do a production proxy if at all possible as that will be extremely difficult for infrastructure reasons.

I would greatly appreciate any help.

dschon
  • 3
  • 2
  • The `OPTIONS` request is automatically sent by the browser, not your app. Even if your app sent its own, that would not trick the browser into allowing access to the response. – tony19 Jun 17 '22 at 00:44
  • Thanks for the response! I thought this was the case. But why wouldn't the browser send the options request? It clearly is a cross origin request. But no options request is sent. Is there something else I have to do in axios or in the vue app to get the browser to realize it should send an options request? Also, I can configure my server to allow access from this origin. But the options request is never sent to it. – dschon Jun 17 '22 at 02:05
  • @dschon Not all cross-origin requests are preflighted. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests – jub0bs Jun 17 '22 at 06:59
  • Thank you. That was very helpful. I had missed the simple requests section previously. My problem is that this is registering as a simple request with a forbidden header (cookie) I can get chrome to send the request to the server anyway if I have the samesite=none and secure flags on the cookie. As discussed here: https://stackoverflow.com/questions/46288437/set-cookies-for-cross-origin-requests I am working on enabling that and will update the question and post an answer once I have it working. – dschon Jun 17 '22 at 13:54
  • @dschon `Cookie` is not a header that the CORS protocol forbids. Where did you get that from? – jub0bs Jun 18 '22 at 11:33

1 Answers1

0

My overarching problem is not solved, but this question is answered. As @jubo0bs points out, not all cross origin requests have options requests.

I cannot force the browser to make an options request, instead the browser is detecting an invalid header or other parameter in the get request which is why I get the 403 and CORS error.

I am currently struggling with a mix of other problems of cookies not getting forwarded and headers not being set quite correctly on the server or on the client but there are many other questions dealing with those specific issues. So I will not water this question down anymore.

See some of the links in the above comments or this SO link for further resources: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

dschon
  • 3
  • 2