前端开发如何解决开发过程中的访问跨域问题

修改 vite 配置文件

通过反向代理, 使该前端项目中的请求从同一个 host 发出.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: '5173',
    host: 'localhost',
    open: true,
    proxy: {  
      "/api": { // 实现将请求转发到不同的目标主机, 此处配置将以 /api 开头的请求转发到下方 target 指定 host
        target: "http://source.com/",
        changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, "/"),
        // rewrite 字段作用是将 /api/msg/ 重写为 /msg/, 此处注释掉不改写 url
      }
    },
  }
})