简单解决vue-cli3下本地开发跨域问题

这里以vue-cli3生成的项目为例

配置devServer.proxy

首先我们假设有一个接口 GET https://www.abc.com/users

其次初始化axios

//  ./http.js
import axios from 'axios'

const baseURL = process.env.NODE_ENV === 'production' ? 'https://www.abc.com/' : 'api/'

export default axios.create({
  baseURL
})

调用接口

// ./index.js

import http from './http.js'

http.get('/users ')
        .then(val => {
          // ..
        }).catch(e => {
          //..
        })

于是如果是生产环境下, 就会请求https://www.abc.com/users没啥问题, 开发环境下会请求api/users

然后我们去配置devServer.proxy

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以api开头的请求路径
      '/api': {
        target: 'https://www.abc.com/',
        ws: true,
        changeOrigin: true,
        secure: false,
        // 把api替换掉
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样就可以把api/users 请求, 通过代理转去请求https://www.abc.com/users了

参考

devServer.proxy配置
http-proxy-middleware