一、问题描述
在开发阶段时 服务区没有配置跨域的情况下
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/