Vue代理请求数据出现404

Vue代理请求数据出现404

当使用代理解决跨域问题出现404错误时，一般有两种原因。

1. 需要进行pathRewrite重写

比如：你想访问的真实地址为http://39.98.123.211/user/list，你请求的url为/api/user/list
下面是你的代理程序

 module.exports = {
   lintOnSave:false,
   //配置代理跨域
   devServer:{
     proxy:{
       "/api":{
         target:"http://39.98.123.211",
       }
    }
  }
 }

如果没有对/api重写，那么代理完你真实的地址则为：http://39.98.123.211/api/user/list，明显多了/api，
因此会出现404错误。我们进行代理时，路径中有/api，则会使用http://39.98.123.211，
再加上url，则就为我们的请求地址 http://39.98.123.211/api/user/list。所以要对/api重写，
如果你的真实路径中正好为http://39.98.123.211/api/user/list，包含了/api那就不用重写。因此将代码改为：

module.exports = {
   lintOnSave:false,
   //配置代理跨域
   devServer:{
     proxy:{
       "/api":{
         target:"http://39.98.123.211",
         pathRewrite:{
         	'^/api':'',
         }
       }
    }
  }
 }

如果无法解决404错误，则使用第二种方法。

2.将代理代码放入config文件夹下的index.js文件中

如果你是vue3项目则在vue.config.js中写代理即可，如果你是vue2项目，代理请求出现404，
且第一种方法无效，则将代理代码写入config文件夹下的index.js中的proxyTable：{}中

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      //配置代理跨域
          "/api":{
            target:"http://39.98.123.211",


      },
    },

由于我的真实地址中有/api所以就没进行/api重写。
记住代理写完，要重写运行项目。