Option to add CORS headers to static assets

Discussed in https://github.com/nuxt/framework/discussions/4003

<div type='discussions-op-text'>

^{Originally posted by hubermat March 31, 2022} Hello,

our Nuxt-based project serves, besides other API routes, static files (i.e. files from ./public). These static files will also be accessed from outside our web application, but browsers apply CORS policies. Up to now I could not find a way to add access-control-allow-origin headers to the static files that are served by the Nuxt server.

I have created a pull request, that adds a new config option in nuxt.config.js:

render: {
  static: {
    /**
     * Whether to add headers to allow access from any origin
     *
     * If set to true, all responses of static files from the `public/` directory will contain the following headers:
     * Access-Control-Allow-Origin *
     * Access-Control-Allow-Methods GET
     * Access-Control-Allow-Headers Origin, X-Requested-With, Content-Type, Accept
     * X-Frame-Options ALLOWALL
     */
    allowFromAnyOrigin: false
  },
}

If allowFromAnyOrigin is set to true, for development mode, a function setHeaders will be passed to serve-static to set these headers. For production mode, the public assets will be flagged and the headers will be set in the static middleware.

</div>

[rezaseyedi91]

You can try routeRules to set CORS for /_nuxt assets: https://v3.nuxtjs.org/guide/concepts/rendering#route-rules. For your own, create a sub directory inside public dir like public/static and set /static: { cors: true } rule.

@pi0 How can I use this solution when I’m trying to send requests with credentials and get: Access to XMLHttpRequest at 'http://localhost:3000/api/v1/admin/auth/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I have set nuxt.config/routeRules to routeRules: { '/**': { headers: { 'Access-Control-Allow-Origin': 'http://localhost:8080' } }, }, and didn’t work out. I appreciate any guidance on this.

[P4sca1]

@rezaseyedi91 This is likely an issue that only occurs in development when using Vite. You can fix this by explicitly setting your origin in nuxt.config.ts:

	vite: {
		server: {
			// Nuxt launches Vite in middleware mode (port 3000), as well as the HMR server (port 24678).
			// The browser will reject requests from localhost:3000 to the HMR server, due to CORS.
			// Because of this, Vite by default adds "Access-Control-Allow-Origin": "*" header.
			// This is problematic, because fetch calls with credentials: 'include' will get rejected when
			// the origin is not explicitly allowed. Because of this, we need to manually define the origin.
			cors: {
				origin: url,
			},
		},
	},