当我们在Vue中使用axios时,有时候会遇到跨域的问题。跨域是指浏览器从一个源网址访问另一个网址的过程,这在Web开发中是非常常见的。如果源地址和请求地址的协议、IP、端口不一样,就会发生跨域的现象。

常见的解决方法有两种:

  1. 服务器后端允许跨域请求
  2. 前端使用代理解决跨域

本文主要说一说第2种方法。

首先我们按照中间代理:

  1. npm install http-proxy-middleware
  2. vue.config.js添加代码
// 全部请求都请求到  <http://localhost:4000>
module.exports = {
  devServer: {
    proxy: '<http://localhost:4000>'
  }
}

// <http://localhost:8925/api/all> 回变成  <http://localhost:4000/all>
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<http://localhost:4000>', // 你要代理的地址,这里以本地API服务器为例
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径,去掉路径中的/api
        }
      }
    }
  }
}