Lotus API Browser Connection = CORS Error

Recently began trying to interface with the Lotus RPC API using Node.JS. With the daemon running the following function works correctly:

function apiRequest() { axios.post('http://127.0.0.1:1234/rpc/v0', { "jsonrpc": "2.0", "method": "Filecoin.ChainHead", "params": [], "id": 3 }, { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + jwt } }).then(res=>{console.log(res.data.result);}).catch(err=>{console.log(err);}); }

where jwt is the string found in ~/.lotus/token.

When calling apiRequest() from node in the terminal it works fine but when taken into a VueJS component in the browser it returns an error:

Access to XMLHttpRequest at 'http://127.0.0.1:1234/rpc/v0' from origin 'http://192.168.7.104:8080' 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.

In FF it returns 2 CORS errors that look slightly different from the one above(Brave), but that is reduced to 1 error after changing the address of the request from 127.0.0.1 to lotus-local-ip-addr

When reading about the CORS purpose and policy(here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and seeing when/why this came about in Lotus(here: https://github.com/filecoin-project/lotus/issues/47) I’m a little perplexed how to configure either the JS in browser or the Lotus Node to allow this request to be handled properly?

Hi @AustinFoss,

I see you got your question regarding needing to add a reverse proxy with Nginx or Caddy for CORS answered on Filecoin Slack here!