Vue.config.js解决跨域问题

原理

1.将域名发送给本地服务器localhost

2.再由本地服务器去请求真正的服务器

3.服务端发出的请求，不存在跨域问题

请注意，我们本地开发遇到的这种跨域是位于开发环境(webpack代理服务器)，真正部署上线的跨域是生产环境(nginx服务器，或者后台配cors)

以下是vue.config.js详细配置：

devServer: {
  // 跨域
  proxy: {
// 只要axios请求中带有/api的url,就会触发代理机制
   '/api': {
// 目标路径：target(我们要代理请求的地址)
    target: 'http://xxxxxxxxxxx.xxx/api',
    // 允许跨域
    changOrigin: true,
    // 重写路径 api代替了目标路径
    pathRewrite: {
    '^/api': ''
    }
   }
  },
},

实战

第一步：在.env.development文件中设置开发环境数据请求的基础路径

#开发阶段的配置文件
#举例
#思考：开发阶段的接口 baseURL="dev.bank.com"

#npm run dev 开发阶段 自动的加载.development数据
#npm run build 产品上线 自动的加载.env.production

#在配置文件中声明的数据 环境变量

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
#设置开发环境数据请求的基础路径
#我只写一个'/api'，会自动匹配我的个人地址http://localhost:8888
VUE_APP_BASE_API = '/api'

第二步：在request.js文件中设置axios路径，就是开发环境.env.development文件中的根路径

import axios from 'axios'
// create an axios instance
// const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// // withCredentials: true, // send cookies when cross-domain requests
// timeout: 5000 // request timeout
// })
const service = axios.create({
// baseURL: 'http://localhost:8888/api',
//
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
//请求拦截器和响应拦截器也写在此文件夹中
export default service

第三步：api模块的单独封装：在src/api文件夹下都是axios请求

//导入在src/utils/request里面设置的axios基础路径
import request from '@/utils/request'
//把axios请求封装成函数，目的：在组件中调用
export function login(data) {
return request({
//例如登录请求
url: '/sys/login',
method: 'post',
data
})
}
//注意：导出方式为按需导出