Firefox CORS - missing "user-agent" in response header "access-control-allow-headers"

Technical Issue Reporting
#1

Hi,
Iā€™m using JS Moralis lib and I have a problem with CORS on Firefox. I guess the problem is that the response from Moralis API is missing ā€œuser-agentā€ in the header ā€œaccess-control-allow-headersā€.

Situation:
In JS is request to API: ā€œMoralis.Web3API.account.getNFTsForContract(options).then(ā€¦)ā€. On Chrome/Brave it works correctly, but on Firefox I receive error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://pbptck3qh01u.usemoralis.com:2053/server/functions/getPluginSpecs. (Reason: header ā€˜user-agentā€™ is not allowed according to header ā€˜Access-Control-Allow-Headersā€™ from CORS preflight response).

I guess itā€™s because Chrome is depreciating ā€œuser-agentā€ header at all, but Firefox does not.

Versions:
Tested on: Windows and Linux on FF 96.0+.
Moralis Server v: 0.0.338 & 0.0.331
JS node_modules/moralis: v1.2.4 and v1.1.0

Firefox REQUEST:

OPTIONS /server/functions/getPluginSpecs HTTP/2
Host: pbptck3qh01u.usemoralis.com:2053
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0
Accept: */*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: user-agent
Referer: https://...
Origin: https://...
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
TE: trailers

Received RESPONSE:

HTTP/2 200 OK
date: Wed, 02 Feb 2022 23:20:12 GMT
content-type: text/plain; charset=utf-8
content-length: 2
x-powered-by: Express
access-control-allow-origin: *
access-control-allow-methods: GET,PUT,POST,DELETE,OPTIONS
access-control-allow-headers: X-Parse-Master-Key, X-Parse-REST-API-Key, X-Parse-Javascript-Key, X-Parse-Application-Id, X-Parse-Client-Version, X-Parse-Session-Token, X-Requested-With, X-Parse-Revocable-Session, X-Parse-Request-Id, Content-Type, Pragma, Cache-Control, X-Parse-Installation-Id
access-control-expose-headers: X-Parse-Job-Status-Id, X-Parse-Push-Status-Id
etag: W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"
cf-cache-status: DYNAMIC
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 6d7726113ede9a8c-MFE
X-Firefox-Spdy: h2
1 Like
#2

there is a particular request that gives that error?

I tested now on latest version of Firefox on macOS (96.0.3) and I donā€™t have any errors.

#3

Its not working on firefox
i also get this issue:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fixvz6vfwee8.usemoralis.com:2053/server/functions/getPluginSpecs. (Reason: CORS request did not succeed). Status code: (null).

#4

can you upload a simple demo app somewhere that gives that error in Firefox? for me it works fine on Firefox.

#5

here it is
http://disgusted-breakfast.surge.sh/

#6

i tried on brave and firefox
this is the error I keep getting
Error: XMLHttpRequest failed: ā€œUnable to connect to the Parse APIā€

But all of my servers have been reset and are running

#7

that site you pasted works fine for me in Firefox, I was able to also authenticate

#8

thats weird
I keep getting

Uncaught (in promise) Error: Network Error

I cant get the token price and I also cant get the NFT, everytime i click it errors
i m able to log in to metamask, that works
what could be the issue?
It has to be an error on my end if you are able to make it work

#9

I can get the token price

you could get CORS errors also when access to server is blocked somehow

#10

how would my server be blocked?
and how do I fix this?

#11

it could be something on your system, network, vpn blocking it

not sure if it is blocked in your case, that is one of the possibilities

#12

@cryptokid
Hey, thanks for reply.
The problem appears on different computers for different people (Windows & Linux), with disabled all plugins etc., so I guess itā€™s not caused by not a plugin or particular FF version.

Itā€™s problem with API request: Moralis.Web3API.account.getNFTsForContract(). . It fails at pre-fetch

Code snipped:

await Moralis.start({
                serverUrl: '...',
                appId: '...',
            });
            const options = {
                chain: '0x38',
                address: '0xBC13A92552a9fD86Be6C0c4d6208A7fC4DE19bB3',
                token_address: '0xd6f8a35F202E2575aCDf929F0069c2E8b3e65ada'
            };
            Moralis.Web3API.account.getNFTsForContract(options).then((res) => {
                //error here
            });
#13

I tried on macOS now on Firefox with:

            options = {
                chain: '0x38',
                address: '0xBC13A92552a9fD86Be6C0c4d6208A7fC4DE19bB3',
                token_address: '0xd6f8a35F202E2575aCDf929F0069c2E8b3e65ada'
            };
            Moralis.Web3API.account.getNFTsForContract(options).then((res) => {
                console.log(res)
            });

and it worked for me

#14

Iā€™ve ran into this issue with nearly all the DApps Iā€™ve built. A simple inconvenient fix is to install the CORS extension in your browser of choice and inform your users. Here is a link to a video I did that describes the error and process to resolving it I provided to my community hope this helps. The video is about 3 minutes the solution is probably 30 seconds:

CORS error solution

1 Like
#15

Thank you for the info, could you please test on FF on Windows, please?

#16

In my case the cors error disapeared after a few minutes, i wish i could give you a better answer but just waiting did the trick in my case that i described above

#17

you could get CORS errors when server restarts, in that case you will get CORS errors on any browser

#18

Thanks @cryptokid for checking with me.
The problem was caused by using moralis lib for node.js instead of version for browser.

1 Like