前后端分离 - 跨域问题

109 阅读1分钟

搞清概念

跨域: 前端网页通过浏览器去请求另一个域名的资源时,域名、端口、协议有一个不同,都是跨域
举例: data-center-vue项目的前端服务 跑在8080端口下,后端项目跑在5000端口下,那么前端在请求后端接口的时候就会出现跨域问题。

截屏2024-01-06 下午1.29.46.png

同源策略: 出现跨域问题的原因来源于 JavaScript 的同源策略。即只有 协议+主机名+端口号(如存在)相同,则允许相互访问
跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装,也同样存在跨域问题。Promise是 JavaScript 中标准的内置对象。

解决方案

在vue2项目中,axios请求出现的跨域问题

在vue.config.js文件中配置以下参数

截屏2024-01-06 下午1.43.01.png 然后在请求的axios中写
修改完vue.config.js文件后,要重启项目,否则修改不会生效

axios.get("/api/energy/get_energy_station_kpi?system_id=2")
.then(res => { console.log(res) })
.catch(err => { console.error(err); })

参考文章