0

I have built the API below but am getting CORS errors in Chrome's network debugger. Opaque responses do not work in parsing the dta

curl -v -X OPTIONS https://pegu8bngmb.execute-api.us-east-1.amazonaws.com/prod/

I have some JavaScript below, the POST method works, but the GET method is getting CORS errors. I have built the API using AWS API Gateway, and enabled CORS.

    fetch("https://101wvh4x70.execute-api.us-east-1.amazonaws.com/dev", {
  method: "GET",
  // mode: "no-cors",
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,OPTIONS,POST",
    "Content-Type": "application/json"
   },
  })
  .then(function(response) {
     console.log(response)
  })
  .catch(function(err) {
    console.log('error')
  });

  "Access-Control-Allow-Headers":["Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token"],"Access-Control-Allow-Methods":["GET,OPTIONS,POST"],"Access-Control-Allow-Origin":["*"]

// POST Method
fetch("https://pegu8bngmb.execute-api.us-east-1.amazonaws.com/prod/", {
  method: "POST",
  mode: "no-cors",
  body: JSON.stringify({
    "record_id": {
      "S": "0"
    },
    "record_count": {
      "N": "11"
    }
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  }
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ghost
  • 13
  • 5
  • The POST method only works, because you don't care for the answer (ie you don't even know, whether your post was successful or not) ... And you don't set the CORS headers on the request to the server but in the response from the server (ie at the server side) – derpirscher Jun 19 '23 at 08:07
  • "'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:5500/' " — Is this a problem? Is that not the origin of the request? Change whereever you set it so it matches the origin! – Quentin Jun 19 '23 at 08:07
  • 2
    ```headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,OPTIONS,POST", "Content-Type": "application/json" },``` — This is nonsense. The `Access-Control` headers are **response** headers and don't belong on the request, and you're making a GET request (which can't have a request body) so claiming it has a JSON request body doesn't make sense (and any of these would make the request preflighted which is undesirable). – Quentin Jun 19 '23 at 08:09
  • The error in the title is not present in the body of the question - please clarify. You'll find `curl -I` to provide all the relevant info in a more concise format. Please add the curl call (`curl -I -X GET ...`) with relevant headers _and the response_ to the question. – AD7six Jun 19 '23 at 08:09
  • 1
    Your `curl` command doesn't set an `Origin` header (unlike `fetch`) and server-side CORS code usually behaves very different when an `Origin` header is / is not present. – Quentin Jun 19 '23 at 08:10
  • "I have some JavaScript below, the POST method works" — You set `no-cors` mode, so while the request is being sent, the `Content-Type` header will be ignored and you won't be able to read the response. – Quentin Jun 19 '23 at 08:11
  • @Quentin that specific values of the header seems to be a problem, because it doesn't reflect the Origin from which the request was sent. Seemingly it's set to a fixed value somewhere in the backend. Ie if I set an arbitrary Origin header for the GET request, the Allow-Origin header always has the value `http://127.0.0.1:5500/` – derpirscher Jun 19 '23 at 08:17
  • @Quentin I'm not OP ... Just noticed this behavior ... – derpirscher Jun 19 '23 at 08:22
  • I would like to clarify that I created the lambda to fetch the last item of the database in dynamodb. It works when i test the apis, I have a static site set up with cloudfront. My question is how do I enable this? Is it a setting or config in the API/cloudfront. – ghost Jun 19 '23 at 11:12

0 Answers0