Vue-Cli配置跨域请求

为什么会出现跨域？

由于浏览器同源策略的限制，当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域

报错信息

解决开发环境的跨域问题

开发环境的跨域

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

1.在 vue.config.js 配置文件添加以下代码

module.exports = {
  devServer: {
   // 代理跨域的配置
    proxy: {
        // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
        '/api': {
            target: 'www.baidu.com', // 我们要代理的真实接口地址
            changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
            // 路径重写（非必选）
            // 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
            // 比如 我们想把请求的api去掉（真实后台没有api前缀情况） 
            // localhost:8888/api/login -> www.baidu.com/login
            pathRewrite: {
               '^/api': ''
            }
      }
    }
  }
}

2.修改环境配置文件

 .env.development
- VUE_APP_BASE_API = 'http://xxxxx.net/api'
// 以 /api 发的请求，会被代理跨域检测到，就会代理我们的请求地址向另外一个服务器发出请求
+ VUE_APP_BASE_API = '/api'

 注意：pathRewrite 选项在后台没有统一前缀情况下使用，用于去除前端临时添加的/api前缀。

总结：

1. vue.config.js文件属于项目的配置文件，每次有修改之后都要重启项目让配置生效

2. 配置了proxy之后，需要把本地的环境变量文件中的绝对路径变成相对路径/api