跨域-Vue-Cli配置代理转发

跨域-Vue-Cli配置代理转发

目标

通过配置vue-cli请求代理解决开发环境下的跨域问题

vue-cli中集成的跨域解决方案

具体有两步：

1. 在vue.config.js中配置devServer
2. 确保基地址指向本地服务

vue-cli解决跨域配置说明

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
    // 'http://localhost:3000' // 接口服务器
      '/api': {
        // /api/users 的请求会将请求代理到 http://localhost:3000/api/users
        target: 'http://localhost:3000' 
        // 如果不希望传递/api，则需要重写路径
        pathRewrite: { '^/api': '' },
      }
    }
  }
}
复制代码

确保基地址指向本地服务

.env.development

// 开发环境下的基地址
VUE_APP_BASE_API = '/api'
复制代码

• api/user.js

export function login(formData) {
  return request({
//  url: 'api/sys/login',
+   url: '/sys/login', // 前面的api就省略了
    method: 'POST',
    data: formData
  })
}
复制代码

注意：

1. vue-cli集成了跨域代理功能—— 只能用在开发阶段。
2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。
3. ajax的基地址baseUrl必须是相对地址，而不能是绝对地址