浏览器对于用户的安全考虑，设置了同源策略。同源策略就是指协议、域名、端口都要相同的情况下，才能请求资源。
跨域：
跨域指的是：在浏览器中，从一个域名去请求另一个域名的资源时，如果协议、域名、端口任意一个不同，都是跨域。
跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。
例如：a 网站想请求 b 网站的资源，如果 a、b 网站的协议、域名、端口有一个不同时，所进行的请求都是跨域的。
协议指： http
域名指： www.baidu.com
端口指： 8080
正向代理的原理：
正向代理：常用于本地的开发环境。
正向代理：就是创建一个代理服务器，当客户端发送请求时，会先经过这个代理服务器，再由这个代理服务器去和目标服务器进行交互。也就是 代理客户端。
用途：
- 隐藏客户端的真实 IP 地址：可以通过正向代理隐藏自己的 IP 地址，避免受到攻击。
- 突破访问限制：通过代理服务器，可以突破自身 IP 的访问限制，访问到国外的网站等。
- 提高访问速度：代理服务器会将部分请求到的数据保存到缓冲区，当再访问相同的数据时，会直接在缓冲区获取数据，传给用户，以提高访问速度。
Vue配置正向代理：
// 假设接口
API接口地址1：https://www.baidu.com/api/goods/list
1.在项目的根目录下创建 vue.config.js 文件，并配置 devServer 代理。
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ //......其它配置 // 配置正向代理 devServer: { // 代理 api 模块（可代理多个模块） proxy: { '/api': { target: 'https://www.baidu.com/api', // 目标服务器的地址 ws: true, // 代理websockets changeOrigin: true, // 虚拟的站点需要更管origin pathRewrite: { // 重写路径 '^/api': '' } } }, // 代理 webapi 模块（可代理多个模块） proxy: { '/webapi': { target: 'https://www.baidu.com/webapi', // 目标服务器的地址 ws: true, // 代理websockets changeOrigin: true, // 虚拟的站点需要更管origin pathRewrite: { // 重写路径 '^/webapi': '' } } } } })
注意：配置正向代理之后，一定要重启项目！重启项目！重启项目！
2. 在需要使用的页面中，将域名删掉，只保留模块名即可。
// 请求API接口1 axios({ method: 'post', url: '/api/goods/list', data: qs.stringify({ id: 1 }) }).then((res) => { console.log(res.data); }) // 请求API接口2 axios({ method: 'post', url: '/webapi/user/info', data: qs.stringify({ id: 1 }) }).then((res) => { console.log(res.data); })
原创作者：吴小糖
创作时间：2023.6.16
