Vue3 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/