Vue3 react18 vite.config.js配置跨域

一、问题描述

在开发阶段时 服务区没有配置跨域的情况下

1、后台服务器地址和端口时候可以配置的

例如：http://localhost:5000，https://192.168.1.10:5000 协议+域名+端口号

2、前台的地址也可以配置 http://localhost:3000

当前台程序要请求后台时 当发现 协议+域名+端口号 某项不一样的时候就会引发跨域。

二、解决

1、后端配置允许跨域，可解决。

2、前端配置跨域，也可以解决。

3、场景案例
已知有个api地址 后端地址是http://localhost:5000/api/getList
前端的vue程序 运行地址是http://localhost:3000
axios配置 baseURL: “/api”,

server: {
    
    
    port: 3000,
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:5000',	//后台地址
        changeOrigin: true, //开启跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }

当你请求到带有/api路径的url时。程序就自动把/api 替换为http://localhost:5000/api/