详解vue-cli项目中的proxyTable跨域问题小结

我来详细讲解一下“详解vue-cli项目中的proxyTable跨域问题小结”的完整攻略。

1. 何为proxyTable？

在Vue CLI项目中，如果需要服务端连接API接口进行数据交互，而此时请求的URL与服务端的域名不一致，就会产生跨域问题。解决此类跨域问题，我们通常会在前端环境下进行反向代理。而Vue CLI中则是采用proxyTable来进行跨域请求。

proxyTable这个属性是新增于Vue-CLI@2.x版本的，它可以配置我们需要代理的接口域名，并且在其中设置映射的协议头。使用它的好处是我们不必再自己手动去封装代理功能了。

1. 如何使用proxyTable？

首先需要在config/index.js文件中找到‘dev’下的配置：

dev: {
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, // 配置自动打开浏览器
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
proxyTable: {} // 代理/设置协议头等等
},

然后在proxyTable对象里，可以设定要反向代理的请求源地址和目标地址，比如：

proxyTable: {
  '/api': { // 与环境中的API对象融合，实际请求时会自动转化为另一个内容
    target: 'http://localhost:3000', // 设定目标地址
    changeOrigin: true, // 允许跨域（实际上并没有跨域，这是vue-cli给的代理解决方案）
    pathRewrite: { // 重定向路径.
      '^/api': '/api'
    }
  }
}

这是比较基础的代理示例，请求/api下的接口都会被映射到'http://localhost:3000/api'下去。这样我们就可以模拟发起跨域请求了。

1. proxyTable的高级配置

除了基础配置，proxyTable还有一些高级配置。比如：

/ 配置示例1
proxyTable: {
  '/api':{
    target: 'https://www.demo.com',
    pathRewrite:{
      '^/api': '/api',
    },
    secure: true, // 是否开启https
    changeOrigin: true,
    cookieDomainRewrite: {
      '*': 'localhost' // 把所有的cookies的 域都重写成了 localhost
    },
    onProxyReq:function(proxyReq, req, res){
      // 设置一个header值
      proxyReq.setHeader('Content-Type', 'text/plain;charset=UTF-8');
    },
    onProxyRes:function(proxyRes, req, res){
      // 设置一个header值
      proxyRes.headers['Content-Type'] = 'text/plain;charset=UTF-8';
    },
    onError:function(err, req, res){
      // 错误处理
      res.writeHead(302, {
        'Location': 'https://127.0.0.1/error'
      });
      res.end();
    }
  }
},

// 配置示例2 
proxyTable: {
  '/api':{
    target: 'https://www.demo.com',
    pathRewrite:{
      '^/api': '/api',
    },
    logLevel: 'debug', // 添加代理日志输出操作
    onProxyReq:function(proxyReq, req, res){
      // 向要发给服务端的请求中添加一些额外的请求头信息
      proxyReq.setHeader('Content-Type', 'text/plain;charset=UTF-8');
      proxyReq.setHeader('Test-Header-Type', 'Test-Header-Content');
    },
    onProxyRes:function(proxyRes, req, res){
      // 从代理的响应头中获取数据
      const cookies = proxyRes.headers['set-cookie'];
    },
    onError:function(err, req, res){
      // 错误处理
      res.writeHead(302, {
        'Location': 'https://127.0.0.1/error'
      });
      res.end();
    }
  }
},

通过以上配置示例，我们可以看出，proxyTable配置的常见函数有：

• target — 请求代理的目标地址
• changeOrigin — 是否开启跨域请求
• secure — 是否启动https
• pathRewrite — 重新映射请求字符串
• cookieDomainRewrite — 重写cookie域名
• onProxyReq — 被用于修改请求参数
• onProxyRes — 被用于修改响应体
• onError — 被用于处理接口请求被拒绝

总结

通过以上详细讲解，我们可以看出如何在Vue-CLI项目中使用proxyTable来解决跨域问题。为了更好地理解，我提供了一些示例。在实际开发中，我们还可以在proxyTable的高级配置中添加一些自定义的配置来实现更多功能。