The Roadblocks of uni-app: How I Solved Them

  1. The paths of css and js files in the generated index.html starts with /.
  2. Access to CSS stylesheet at ‘xxx.css’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app.

The paths of css and js files in the generated index.html starts with /.

This can be a problem if your app is not hosted in the domain root.

Solution: Configure vite.config.js (Vite Projects)

If using Vite (uni-app Vue3 projects):

1
2
3
4
5
6
7
8
// vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  base: './' // Set to relative path
})

Access to CSS stylesheet at ‘xxx.css’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app.

In this case you’re trying to open the index.html file directly from the filesystem (file:// protocol), which triggers CORS (Cross-Origin Resource Sharing) restrictions in modern browsers. The paths in your HTML are already correct (./assets/...), but browsers block file:// protocol requests for security reasons.

Quick Solutions: Use a Local HTTP Server, instead of opening index.html directly, serve it through a local HTTP server.