---

前言

时隔一年再次更新文档，惭愧，本应该勤奋，却玩了半年多，中途学了点技术，之后其他文章里慢慢分享
如果想直接看解决方案可以直接跳到解决方案（尽量简洁，易学易懂）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题产生原因

1.首先展示源代码（十分原始的Axios用法）

定义外部JS（文件名：User）：

// 定义外部调用JS
// 调用Axios
import axios from 'axios'

//对外方法
export const getUser= async() => {
  return (await axios.get('http://127.0.01:6666/getUser'))
}

调用外部JS：

// 调用外部JS
// 格式 import { 方法名 } from 调用文件
import { getUser } from '@/api/User'

export default {
	data() {
		//略
	},
	computed(){
		toUser(){
			const user = getUser()
		}
	}
}
//调用

结果：

CORS error

二、看其他同事定义的外部JS，进行模仿（以为是公司框架内部导致如此）

1.定义外部JS（改良版）

// 定义外部调用JS
// 调用Axios
import axios from 'axios'

//创建axios对象
const service = axios.create({
  baseURL: '127.0.0.1:6666'
})

//配置axios请求过滤器（一定要加，否则无法使用）
service.interceptors.request.use(config => {
  console.log('拦截器')
  //请求参数
  config.params = config.params || {}
  //设置一定携带的请求参数
  config.params.key = 'xxxxxxx'
  //设置请求头
  config.headers = { 'Context-Type': 'application/x-www-form-urlencoded', 'key': key }
  return config
}, error => {
  return Promise.reject(error)
})

//配置axios响应过滤器
service.interceptors.response.use(
  response => {
    response.headers = { 'Context-Type': 'application/json charset=utf-8' }
    const res = response
    return res
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
//对外方法
export const getUser= async() => {
  return (await axios.get('http://127.0.01:6666/getUser'))
}

结果：

CORS error

---

三、解决方案

之后冷静下来。仔细想想跨域问题,终于找到了解决方案

何为跨域：

这个是浏览器的 同源策略 简单来说就是我们必须在同一个域名内，才能请求发送数据，这样才能保证数据的安全
那么如何跨域呢，也相当简单，这个既然是浏览器造成的，那么我们“不用到浏览器”就行了，单纯让两个服务器之间进行通讯，这样就不会有问题了，具体操作便是反向代理，让外部服务器返回消息给当前服务器就行

具体实现
在Vue项目中有个文件叫做vue.config.js，再此就可以配置跨域代理了，代码如下：

module.exports = {
	 proxy: {
      '/apiV1': {
        ws: true,
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/apiV1': '/'
        }
      },
      '/api': {
        // 是否允许跨域
        changeOrigin: true,
        ws: true,
        target: 'http://127.0.0.1/api/v1',
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

之后重新在调用的地方修改Url

const service = axios.create({
  baseURL: '/apiV1'
})

---

后记

之前由于一直调用的是自己写的API，出现跨域问题多半想到的是修改后端代码，从来没有细想过跨域究竟是这么产生的，这次正好调用外部API出现了问题，特此记录，若有不足或者错误，麻烦各位大佬指教