Request blocked by CORS policy on localhost when using web3api and devchain

Technical Issue Reporting
#1

Hi,

I see a lot of CORS-related issues here, and got one myself.
Everything works fine if I use eth chain, but accessing my ganache local instance seems to have some issues with some calls, not all of them. This call will not work:

Log:
2021-09-13T07:20:09.552Z - Error: [object Object]
at fetch (/moralis-server/lib/cloud-code/plugins/convenience/web3Api.js:238:11)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:95:5)
2021-09-13T07:20:09.549Z - Failed running cloud function getNFTsForContract for user OXNA78LM3DzB080qjfGLpfWH with:
Input: {ā€œchainā€:ā€œganacheā€,ā€œaddressā€:ā€œ0xffe0af711d591f5da9d9b3374814ee63db97123aā€,ā€œtoken_addressā€:ā€œ0xD5D0Dd3C4b0b8bF21472f80e7d547e7FeFFEbc2cā€}
Error: {ā€œmessageā€:"[object Object]",ā€œcodeā€:141}

The error msg is not really clear as it returns an object.
Origin is: http://localhost:4200
Moralis-Server is updated to the newest version.
The Request error is the typical "Access-Control-Allow-Originā€™ missing.
This only happens when calling that method. I get no response at all and the request will just time out after some time with a 504 Gateway timeout.Other things work like user auth, and moralis records those things correctly.

Things seem to be set up correctly and work, but not for this request. Havenā€™t tested any other things.

Am I missing something?

#2

You could try http://127.0.0.1:4200 instead of localhost.

#3

Also maybe ganache is not connected with frp proxy.

#4

Thanks for the suggestion. Iā€™ll try with another host. Ganache is connected and working with frp.

#5

Sadly it does not help if I use the IP as host. The issue remains.

#6

It turns out that Moralis.Web3API.account.getTokenBalances() is not a function that works with local Ganache.

#7

Oh, well im calling getNFTsForContract(), but I guess Iā€™m running into the same problem. Can it be found in the docs if, and what methods may not work locally.
Any workaround to solve this?

I would be interested in why some of these things donā€™t work locally from a technical point of view to get a better understanding of how moralis does things in the background.

#8

I made a mistake there, I wanted to say that getNFTsForContract doesnā€™t work with local Ganache. For now, how I figure it out what would work and what would not work, is by looking at the https://admin.moralis.io/web3Api equivalent query for that API call, and for some queries there will be a specific field when it can be used with local devchain (The subdomain of the moralis server to use (Only use when selecting local devchain as chain)).
The idea is that Moralis does extra processing for main blockchains in order to make some information easily available in API calls, information that it would not be accessible only by making a query to the blockchain node.

3 Likes
#9

The Same Origin Policy (SOP) is a security measure standardized among browsers. It is needed to prevent Cross-Site Request Forgery (CSRF). The ā€œOriginā€ mostly refers to a ā€œDomainā€. Same Origin Policy prevents different origins (domains) from interacting with each other, to prevent attacks such as CSRF (Cross Site Request Forgery) through such requests, like AJAX. In other words, the browser would not allow any site to make a request to any other site. Without Same Origin Policy , any web page would be able to access the DOM of other pages.

This SOP (Same Origin Policy) exists because it is too easy to inject a link to a javascript file that is on a different domain. This is actually a security risk ; you really only want code that comes from the site you are on to execute and not just any code that is out there.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

1 Like
#10

Thank you for taking the time for the explanation. Iā€™m a web/software engineer and got a pretty good understanding of what CORS is, but thank you anyway, it may also help out others as well. Unfortunately, there was no way to fix this, as stated in the responses above, it is simply not possible to call the function, as it does not exist for a local environment. Doing this with a live server has no issues, there are also no CORS issues. But I was trying to do this on localhost, which is not supported, and setting headers had no effect.

#11

As an update, web3api calls donā€™t work now with local Ganache.