Access blocked by CORS: domain.site <> domain.site:3000

[cballenar]

Question

I saw this mentioned in a couple other issues here but they don't seem to have the same resolution... I've set up vite php to use the same domain for serverPublic and devServerPublic except for the addition of port 3000 in dev. And because the browser detects different ports as different origins, it throws a CORS policy error.

I was able to fix this by running:

docker exec -d ddev-router sh -c "echo 'proxy_set_header Origin \"\"; add_header \"Access-Control-Allow-Origin\" \"*\" always;' >> /etc/nginx/conf.d/default.conf"
docker exec -d ddev-router nginx -s reload

As seen in: https://github.com/mogtofu33/contenta-ddev/issues/1

But I wasn't sure if this was the right approach or if there's a better one. Do you have any insight on this? (it's currently working, so it's not a high priority, mostly reporting for documentation).

Additional context

Full CORS error:

Access to script at 'https://mydomain.ddev.site:3000/src/js/app.js' from origin 'https://mydomain.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[khalwat]

I don't really have a better resolution for you -- this isn't really related to the Craft Vite plugin, but rather Vite itself.

Maybe this helps? https://rubenr.dev/en/cors-vite-vue/