因为浏览器同源策略的限制,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 是一样的。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/862/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年03月23日 ©著作权归作者所有

发表评论

正在加载 Emoji
×