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, // 支持 WebSocket
        changeOrigin: 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