Localhost can't connect CORS using ethers.js InfuraProvider

Questions
1

I’m trying to use ethers.js with an Infura provider. When developing locally, trying to make a request from a frontend web app, I’m getting the following error.

“Access to fetch at ‘https://ropsten.infura.io/v3/<PROJECT_ID>’ from origin ‘http://localhost:4200’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

Any ideas how to resolve this?

2

This was related to passing in a secret from the browser. I guess Infura forces a https connection if secret is present. Removing the secret resolved the CORS issue for me.

1 Like
3

Hey @stu - welcome to the Infura community! So glad you figured it out, and thanks for posting so others who may run into this issue can reference it! :slight_smile:

4

Hi @Leiya_Kenney - I’m running into this problem as well. I’m trying to develop an app using localhost but I need to use the secret for production. Is there an easy way to to this or will I need to alter how I’m making the call whether I’m developing locally vs deployed?

5

Hi @Matt, and welcome to the Infura community!

This is a good article with some workaround that you may be able to use - let us know if you’re still running into this issue!

6