報錯信息

Access to XMLHttpRequest at 'http://localhost:3000/player' from origin 'http://localhost:4000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因

vue需要配置自定義代理規則進行跨域訪問

配置跨域

官方文檔：https://cn.vitejs.dev/config/server-options.html#server-proxy

在vite.config.ts修改：

//vite.config.ts

export default defineConfig({
  //......
  server: {
    //......
    port: 4000,      	//vite的預設埠（別和後端衝突了）
    proxy: {
      "/api": {			//代理的請求
        target: "http://localhost:8000",	//後端的地址
        changeOrigin: true,					//開啟跨域訪問
        rewrite: (path) => path.replace(/^\/api/,''),	//重寫首碼（如果後端本身就有api這個通用首碼，那麼就不用重寫）
      },
    },
  },
})

發起請求的地方：

axios.defaults.baseURL ='/api';   //配置首碼


axios.get('info')		  //這裡會發送到http://localhost:4000/info

生產環境配置跨域

生產環境配置跨域，還需要編輯nginx的配置文件，在server對象中再添加一個location對象（別忘了上一個對象末尾的分號;）

server {
  //......

  location /api/ {
      proxy_pass http://localhost:8000/;   //後端的地址
  }
}