Web3.js: [email protected] (Webkit, Gecko) CORS Error

[dillonsvincent]

Description

Calling method on web3.eth.Contract web3js in Firefox, Safari, and iOS browsers throws a CORS error, same method call will succeed in Chrome desktop only.

Expected behavior

This should succeed like it does in Chrome Desktop

  var contract = new web3.eth.Contract(_abi, _address);
  contract.methods.GetLength().call().then((res)=>{...

Actual behavior

  In firefox I get an error for cors
  var contract = new web3.eth.Contract(_abi, _address);
  contract.methods.GetLength().call().then((res)=>{...

Steps to reproduce the behavior

0. Use Firefox, Safari, or any iOS browser
1. Import `web3js beta 50`
2. Set the provider to `infura v3`
3. Create contract instance and make request



```
    var web3 = new Web3("https://rinkeby.infura.io/v3/key");
    try {
    var contract = new web3.eth.Contract(JSON.parse(table.abi), table[network]);
    contract.methods.GetLength().call().then((res)=>{
      //console.log(res);
      resolve(res);
    },(err)=>{
      alert(err);
      console.log(err);
      reject();
    });
  }catch(err){
    //alert(err);
    console.log(err);
    reject();
  }    
```

Error Logs

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rinkeby.infura.io/v3/key. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rinkeby.infura.io/v3/key. (Reason: CORS request did not succeed).

Gists

Versions

• web3.js: beta.50
• nodejs:
• browser: Firefox, Safari, Chrome (mobile)
• ethereum node:

[OFRBG]

Just as a note, I believe this isn't specific to beta 50 or the latest Firefox release, and that this has been an issue since much earlier.

[dillonsvincent]

You're right I believe the issue is with the underlying browser engines. From what I can see all browsers mobile or desktop using Webkit or Gecko have this issue. The only browser engine I know that doesn't have this issue it Blink the Chrome desktop engine, and that's why I get these issues in iOS because chrome mobile uses Webkit.

Edit: Brave Desktop works just fine too :)

[nivida]

You have to configure the Access-Control-Allow-Origin header.

Example:

new Web3(
  new Web3.providers.HttpProvider(
    'https://rinkeby.infura.io/v3/key',
    {
      headers: [{
        name: 'Access-Control-Allow-Origin',
        value: 'https://rinkeby.infura.io/v3/key'
      }]
    }
  )
);

[dillonsvincent]

When setting the header like recommended above I get a preflight error

Access to fetch at 'https://rinkeby.infura.io/v3/key' from origin 'http://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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My understanding was that Infura should be setting those headers in the response.

Also reading the web3 docs to see how I missed those options for provider and I see this:

"Object - HttpProvider: The HTTP provider is deprecated, as it won’t work for subscriptions."

[kumavis]

possibly related https://github.com/ethereum/web3.js/issues/1802

[nivida]

Thanks for the test. I'll test and fix it today.