Vite配置代理解决跨域问题

跨域

是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 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
      }
    }
  }
})

选择使用 proxy 解决：

server: {  
    base: './',  
    proxy: {  
        '/api': {  
            target: 'http://172.26.19.244:5000/', // 代理目标地址  
            ws: true, // 是否开启websocket支持  
            changeOrigin: true, // 是否允许跨域  
            rewrite: (path) => path.replace(/^\/api/, ''), //路径重写规则  
        }  
    }  
}

如果需要向 http://172.26.19.244:5000发起请求 ，则 target 就填 http://172.26.19.244:5000 ，在所有请求的地方用“/api”替换 http://172.26.19.244:5000
例如：url: "/api/3dtiles"