因为浏览器同源策略的限制，AJAX 是不能跨域请求的，只有后端设置了 header 才能跨域请求。对于前后端分离的项目来说，前端如果要测试 API 就需要后端设置 header 来配合前端，前端在发送请求也需要输入完整的域名，而且也不方便传递 Cookie。

Webpack 的 dev-server 可以把请求转发到另一个域名，前端可以直接通过相对路径的方式请求本地服务器，本地服务器又会把请求转发到另一个域名，这样就不会有跨域的问题了，后端也不需要设置 header，同时也能传递 Cookie。

这里简单写一下 Webpack 和 Vue-CLI 创建的项目的代理配置。

Webpack

关于 Webpack 本地服务器的安装和简单配置可以看 Webpack 简易使用指南 。

下面是包含代理的 dev-server 配置：

devServer: {
  contentBase: 'dist',
  port: 8080,
  inline: true,
  overlay: true,
  proxy: {
    '/api': {
      target: 'https://misterma.com/',
      changeOrigin: true,
      secure: false
    }
  }
}

代理配置需要写在 proxy 中。

下面是配置说明：

  • /api：匹配代理的字符串，发送到 api/server.php 的请求会被转发到 https://misterma.com/api/server.php。域名后面可以包含路径。
  • target：转发的域名或 IP，如果 target 为域名，changeOrigin 就需要设置为 true。
  • changeOrigin：转发到 target 中的地址，一般可以设置为 true。
  • secure：使用 HTTPS。

Vue-CLI

打开项目根目录下的 vue.config.js，如果没有 vue.config.js 就创建一个，格式如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://misterma.com/',
        changeOrigin: true,
        secure: false
      }
    }
  }
}

服务器相关的配置需要写到 devServer 中，代理相关的配置又需要写道 proxy 中，代理的配置信息和上面的 Webpack 是一样的。

相关文章：