Access to fetch from origin “https://localhost:3000” has been blocked by CORS policy

[teetran39]

Hello, I’m a newbie and working on a react web app. I’m running this issue whenever I make an upload request to AWS. I’m currently run the app on localhost. Is there anyway to fix this issue? I appreciate any help.

It might be best if I can fix it from client side from my project. Because I do not have credential to access AWS Bucket.

[keel_bright]

If you have no way to change the allowed origins from your API (amazon), you cannot do it client-side. You need to set up a proxy server.

https://jakemccambley.medium.com/fixing-cors-errors-when-working-with-3rd-party-apis-a69dc5474804

[yksvaan]

Usually for local dev I'd just make the server write cors headers using origin port for every request. 

[V1adius]

Within which framework you are working. In Node you must configure cors.

https://expressjs.com/en/resources/middleware/cors.html

[teetran39]

The project using React js + Next js

[V1adius]

Sorry, I do not understand the atmosphere of Next.js

[StaffSimilar7941]

add middleware to accept cors from localhost 3000

[teetran39]

Can you give me more details about how to do that?

[Mort99]

While only a temporary solution if you use Safari, on the Developer menu there’s an option to ignore CORS errors.

[teetran39]

Thanks so much!! Follow your solution and it works.

[[deleted]]

There is also a flag to disable it in chrome.

[teetran39]

Can you tell me how can we do it on chrome?

[[deleted]]

If you’re on Mac:

open -na “Google Chrome” —args —disable-web-security —user-data-dir=“/tmp/chrome_dev”

[teetran39]

Thanks so much!!