vue解决跨域问题
什么是跨域问题？
跨域请求是指协议名、主机名、端口号三者有任何一个不一样，就会被浏览器视为跨域请求。即使服务器接收并返回了结果，浏览器也会拦截响应，导致前端无法获取数据。
解决方案：配置代理服务器
配置代理服务器是一种正向代理的方式，它的原理如下：
1.设置一个代理服务器，其协议名、主机名、端口号与前端一致。
2.前端访问该代理服务器，由代理服务器转发请求给其他服务器获取数据。
3.代理服务器将数据返回给前端，解决了跨域问题。
配置代理服务器的方法
在 Vue 项目中，我们可以使用以下两种方法来配置代理服务器：
方法一：使用 vue.config.js
1.在项目根目录下创建 vue.config.js 文件（如果已存在，则直接编辑该文件）。
2.在 vue.config.js 中添加以下配置：
module.exports = {devServer: {proxy: 'http://localhost:5000' // 设置代理服务器地址}
};
这样，前端请求时会先经过代理服务器，解决了跨域问题。
方法二：更灵活的配置
如果你需要更灵活地控制请求是否走代理，可以使用以下方式：
1.在 vue.config.js 中配置多个代理：
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:5000', // 设置代理服务器地址pathRewrite: { '^/api': '' }, // 去掉请求前缀ws: true, // 支持 WebSocketchangeOrigin: true // 修改请求头中的 host},'/demo': {target: 'http://localhost:5001',pathRewrite: { '^/demo': '' },ws: true,changeOrigin: true}}}
};
2.在前端请求时，使用带有 /api 或 /demo 前缀的地址，例如：
axios.get('/api/students').then(response => {console.log('响应体内容', response.data);
}).catch(error => {console.log('请求失败', error.message);
});
这样，你可以根据不同的请求前缀灵活地配置代理服务器。
- 打卡6.10
