Unable to configure CORS to access MUD v2 DApp on different host

[ltfschoen]

I'm running a MUD v2 DApp in a Docker container, and exposing ports 8545 and 3000 so I can access it on the host machine in my browser at http://localhost:3000 (as mentioned here #859)

But since I'm accessing it from a different origin I need to allow CORS headers.
Initially it gave me the following CORS error:

Firefox can’t establish a connection to the server at ws://127.0.0.1:8545/. websocket-provider.ts:89:47
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8545/. (Reason: CORS request did not succeed). Status code: (null).
2
GET
http://localhost:3000/favicon.ico
[HTTP/1.1 404 Not Found 0ms]

[CallWithRetry Failed] attempt number=0 
function Te()
promise.ts:35:18
Error: missing response (requestBody="{\"method\":\"eth_blockNumber\",\"params\":[],\"id\":42,\"jsonrpc\":\"2.0\"}", requestMethod="POST", serverError={}, url="http://127.0.0.1:8545", code=SERVER_ERROR, version=web/5.7.1)

Then I found the relevant Vite.js docs https://vitejs.dev/config/server-options.html#server-cors and modified packages/client/vite.config.ts in the example DApp adding the cors property, so it's contents became:

export default defineConfig({
  ...
  server: {
	...
        cors: {
          origin: ["ws://127.0.0.1:8545/", "http://127.0.0.1:8545/", "http://localhost:3000/"],
          methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE', 'OPTIONS'],
          allowedHeaders: ['Content-Type', 'Authorization'],
          exposedHeaders: ['Content-Range', 'X-Content-Range'],
          preflightContinue: true,
          optionsSuccessStatus: 204
        },
	...
  },
  ...
})

Then I stopped the server, and even rebuild it with pnpm initialize, and then started it again with pnpm run dev, but I still get the same CORS errors

Even if I change it to origin: "*", i still get the same error

        cors: {
          origin: "*",
          methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE', 'OPTIONS'],
          allowedHeaders: ['Content-Type', 'Authorization'],
          exposedHeaders: ['Content-Range', 'X-Content-Range'],
          preflightContinue: true,
          optionsSuccessStatus: 204
        },

the mud devnode is definitely running on the Docker container and generating blocks, and says in the logs Listening on 127.0.0.1:8545

[ltfschoen]

after a bit of investigating, it seems to be because this Vite.js issue hasn't actually been resolve, or i'm not configuring it correctly vitejs/vite#652
In order to overcome the CORS issue so the page loaded, i had to edit my-project/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/client/client.mjs by changing the line

const socketHost = `${__HMR_HOSTNAME__ || importMetaUrl.hostname}:${hmrPort || importMetaUrl.port}${__HMR_BASE__}`;

to instead be

const socketHost = '127.0.0.1:8545'; 

[ltfschoen]

after a bit of investigating, it seems to be because this Vite.js issue hasn't actually been resolve, or i'm not configuring it correctly vitejs/vite#652 In order to overcome the CORS issue so the page loaded, i had to edit my-project/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/client/client.mjs by changing the line

const socketHost = `${__HMR_HOSTNAME__ || importMetaUrl.hostname}:${hmrPort || importMetaUrl.port}${__HMR_BASE__}`;

to instead be

const socketHost = '127.0.0.1:8545'; 

UPDATE: This may not have worked as I thought....

[ltfschoen]

this is the codebase where I get the error https://github.com/ltfschoen/MUDTest

[ludns]

this seems like a cors issue with anvil, not vite (anvil is running on port 8545).
can you curl localhost:8545; what do you get?
if you use cast block 0; do you get a response back? (it is configured to talk to localhost:8545 by default)

[ltfschoen]

this seems like a cors issue with anvil, not vite (anvil is running on port 8545). can you curl localhost:8545; what do you get? if you use cast block 0; do you get a response back? (it is configured to talk to localhost:8545 by default)

Thanks for your prompt response! I figured out a solution and posted it here vitejs/vite#13240 (comment).

Basically the Anvil documentation mentions Docker configuration here, but I didn't appreciate it's significance https://book.getfoundry.sh/reference/anvil/#usage-within-docker. It says you can "use the ANVIL_IP_ADDR environment variable to set the host's IP. ANVIL_IP_ADDR=0.0.0.0 is equivalent to providing the --host option" "In order to run anvil as a service ... with the Docker container".

So instead of just running pnpm run dev, I instead ran export ANVIL_IP_ADDR=0.0.0.0 && pnpm run dev , and that resolved the CORS issues.

Perhaps we could mention in the MUD v2 documentation that the use of setting ANVIL_IP_ADDR=0.0.0.0 is also useful for running it in a Docker container for general development like I've configured it for, even when not using it just for Github Actions.

Otherwise I'm happy for this issue to be closed.