CORS issue with infura.io on safari and mobile browsers

Question

Connecting to infura.io is working fine when using chrome on desktop, however when using safari I get CORS issues. Also the mobile versions of the page don't even load on the device. The following messages appear in the console.

Failed to load resource: Origin http://website.com is not allowed by Access-Control-Allow-Origin.
Fetch API cannot load https://ropsten.infura.io/[ID]/. Origin http://website.com is not allowed by Access-Control-Allow-Origin.

I am using Amazon s3 so I tried to change the CORS configuration settings to something like this, but still no effect.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>x-requested-with</AllowedHeader>
    <AllowedHeader>origin</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Is this a common issue with infura.io? Is there anything else that I am missing?

Answer 1

I have faced the same issue in my angular 7 project, I was used web3 js version 1.0.0-beta.37".

Once downgrade the version to web3 1.0.0-beta.34,

It works fine in all browsers including desktop and mobile (android & ios devices).

Additionally you have to install "eth-lib": "0.2.7", if you are not installed.

import web3 like below in .ts file,

import Web3 from "web3";

  public web3;

constructor() {
 this.web3 = new Web3(
  new Web3.providers.HttpProvider(environment.transferWeb3ApiUrl)
);
}

Answer 2

I have found the following issues that matches the exact same problem you have mentioned above :

• https://github.com/ethereum/web3.js/issues/1802

request.withCredentials is added on web3 1.0.36 beta.

• https://github.com/INFURA/infura/issues/156

You can find the related change in this commit.

• https://github.com/ethereum/web3.js/commit/f98fe1462625a6c865125fecc9cb6b414f0a5e83

Hope the above links can help