简记webpack proxy实现跨域

前言

本文不讲述webpack devServer proxy跨域原理，只说最简单的配置

webpack配置

...
devServer: {
    contentBase: './dist',
    port: 1234,
    open: false,
    proxy: {
      '/api': 'http://localhost:9999'
    }
  }
 ...

我们把接口中以api开头的都代理到http://localhost:9999地址下

ajax请求配置

const Instance = axios.create({
  baseURL: '/',
  // baseURL: 'http://localhost:9999' // ngnix反向代理
})

小结

和ngnix反向代理实现跨域一样，你需要对前端请求的路径修改。
示例代码中前端代码所在的端口为1234,后台服务端口为9999，不能只加了个proxy而不修改接口请求路径，这样是不会跨域成功的.