document how to debug CORS issues

[nick1udwig]

https://discord.com/channels/1186394868336038080/1186421052071477428/1298665751653253241

[barraguda]

In this case it was the dev trying to hit their kinode directly with fetch(/localhost:8080/process:pkg:publisher/some-path and running into cors issues because that browser tab was running on localhost:5137.

The solution is to just hit fetch(/process:pkg:publisher/some-path), and then define a proxy in your vite config like this:

// This is the proxy URL, it must match the node you are developing against
const PROXY_URL = (process.env.VITE_NODE_URL || 'http://127.0.0.1:8080').replace('localhost', '127.0.0.1');

export default defineConfig({
  base: BASE_URL,
  server: {
    proxy: {
      [`^${BASE_URL}/our.js`]: {
        target: PROXY_URL,
        changeOrigin: true,
        rewrite: (path) => {
          console.log('Proxying  jsrequest:', path);
          return '/our.js';
        },
      },
      [`^${BASE_URL}/kinode.css`]: {
        target: PROXY_URL,
        changeOrigin: true,
        rewrite: (path) => {
          console.log('Proxying  csrequest:', path);
          return '/kinode.css';
        },
      },
      // This route will match all other HTTP requests to the backend
      [`^${BASE_URL}/(?!(@vite/client|src/.*|node_modules/.*|@react-refresh|$))`]: {
        target: PROXY_URL,
        changeOrigin: true,
      },

    },
  },
});

[barraguda]

We have some frontend tutorials in our book, but most of them omit the actual UI dev process, I'll see if I can add some basic into the chess or chat cookbook, so we can map out some of these basic pitfalls