前端 vite 跨域配置 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘

跨域

是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

---

vite 跨域代理

把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址，这样前后端就视为使用了相同的域名、协议和端口，就避免了跨域的问题，还能避免繁琐的反复编写域名

server.proxy 为开发服务器配置自定义代理规则

官方示例

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})

上面是官方给出的设置代理的几种方式，对于初学者来说，可能理解的不是很深刻；
这里我直接用我的项目实例来掩饰一下；我的项目用的是axios

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  server: {
    host: '0.0.0.0',
    // port: 8080,      
    open: true,
    proxy: {
      "/neimenmenhuan": {  //服务器接口路径地址，根据路径设置
        target: "http://xxx.xx.x.xx:8080",  //你的服务器地址
        changeOrigin: true,  // 允许跨域
        rewrite: (path) => path.replace(/^\/neimenmenhuan/), // 重写路径把路径变成空字符，（我理解的意思是：baseURL: '/neimenmenhuan/' 配置了，子接口 url: 'neimenmenhuan/settings/qx/user' 也可以正常访问，但是理解的很粗略，希望得到一个透彻的答案；
      },
    },
  },
 }；

axios 文件

import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
    baseURL: '/neimenmenhuan/', // 所有的请求地址前缀部分
    timeout: 60000, // 请求超时时间毫秒
    headers: { 
        // 设置后端需要的传参类型
        'Content-Type':'application/json;charset=UTF-8'
    },
})

子接口模块

import httpRequest from '@/axios/index'

// 获取用户信息
export function apiGetUserInfo(param) {
    return httpRequest({
        url: 'neimenmenhuan/settings/qx/user/sendNM.do',
        method: 'post',
        data: param
    })
}

然后页面导入使用，就可以解决跨域问题啦