API gateway axios network Error on Mac OS

0
votes

I am trying to call an API with axios from my ReactJS application (Mac). But I keep getting this error message,

Access to XMLHttpRequest at 'https://api_url/' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I referred other stackoverflow answers but the error is still coming. I don't know where I made a mistake whether It is in AWS backend or Frontend. If anyone has an idea or solution please share.

Thanks in advance,

1
amazon-web-servicesaxiosaws-api-gateway

1 Answers

0
votes

This is due to Cross Origin Resource Sharing (CORS) being disabled by default.

Your React app comes from a different domain (e.g https://localhost:3000) and therefore cannot call remote servers by default (e.g 'https://api_url/).

See Wikipedia and enable-cors for great explanations.

This must be enabled explicitly.

AWS API Gateway will let you do this from the UI.

  • Select your API in the UI
  • In the actions dropdown choose "Enable CORS"
  • Follow the forms to enable and you should be good to go!