AWS re:Post을(를) 사용하면 다음에 동의하게 됩니다. AWS re:Post 이용 약관

API Gateway CORS issue using JS Fetch

0

I've seen this question asked a few times, but, there doesn't seem to be clear response.

I've got an API Gateway attached to a Lambda function, a get call to the API should return a value, in this case either 0 or 1.

In postman this works fine, but, when I try it in my deployed code (which is JS) the fetch call fails:

Access to fetch at '[APIGATEWAYURL]' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. (this also fails with a version in my s3 bucket.)

This answer: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html shows an option to enable CORS, but I don't see that on my console...

1개 답변
2
수락된 답변

Your Lambda function needs to return the right headers in the response, for example:

const responseHeaders = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*',
};
const body = { 'userId': 13232 };
return {
  statusCode: 200,
  headers: responseHeaders,
  body: JSON.stringify(results),
};

You shouldn't have to configure CORS after you add those headers. But if you want to configure CORS on API Gateway then navigate to API Gateway in the console and click to open the API Gateway instance you want to change. Under details for that API Gateway open the side menu and make sure you are under resources, then you can enable CORS for a specific resource such as "/users". If you add methods then you'll need to add another header for Access-Control-Allow-Methods such as 'Access-Control-Allow-Methods': 'GET'.

AWS
답변함 9달 전
profile picture
전문가
검토됨 7달 전
profile picture
전문가
검토됨 9달 전
profile picture
전문가
검토됨 9달 전
  • Amazing - thank you.

  • Furthermore, it worked on Postman and not in the fetch call because Postman is a developer tool. It doesn't enforce CORS by default, so your request is treated as "SAME ORIGIN". Your browser is also a developer tool so if you test your API directly in the browser, it will work just fine BUT the scripts like js are treated differently by the browser and the requests made by a script are enforced with "CROSS ORIGIN" and hence it pops a CORS error.

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠