关于VUE在开发环境中的跨域配置-CFANZ编程社区

VUE，基本上是前后端分离项目（由于我是小白也不敢太肯定），前端写好项目对好接口再打包上线，但是这就经常碰见资源策略的限制，也就是俗称的跨域，我还记得第一次写项目的时候，确实配置了跨域，但是上线的时候还需要把所有的接口重新换一下值（由于跨域配置成/API/XXX）的方式，那时候还不理解，但是这一次发现了axios配合vue打包的生产环境和开发环境配置之后也算是豁然开朗，在次做以记录。

废话不多说，直接从引入axios开始

首先引入axios相关依赖（我这里用的是vuecli内部的包管理器不用图形化界面的正常用npm的方式进行安装）

而后配置axios相关参数

创建axios.js文件，进行配置，内容如下


import axios from 'axios'
import { setLocal } from '@/common/js/utils'
import router from '../router'

axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '开发环境接口地址' : '生产环境接口地址'
axios.defaults.withCredentials = true
console.log(process.env.NODE_ENV)
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.response.use(res => {
    if (typeof res.data !== 'object') {
        return Promise.reject(res)
    }
    if (res.data.resultCode != 200) {
        if (res.data.resultCode == 416) {
            router.push({ path: '/login' })
        }
        if (res.data.data && window.location.hash == '#/login') {
            setLocal('token', res.data.data)
            axios.defaults.headers['token'] = res.data.data
        }
        return Promise.reject(res.data)
    }

    return res.data
})

export default axios

这里需要注意的是在配置开发环境以及生产环境的过程中要注意，如果配置了跨域则开发环境不要进行配置，就用本地端口就行，因为如果配置了开发环境API会导致代理失效，但是在生产环境中跨域配置全域名

之后便可引入使用

import axios from '../utils/axios'

export function getTest(id) {
  return axios.get(id);
}

然后在 vue.config.js中进行跨域配置，直接上代码

module.exports = {
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost",
        port: '8080',
        https: false,
        hotOnly: false,
        hot: true,
        proxy: {
            '/api': {
                target: 'http://api.xueba.hk/activity.camp', //API服务器的地址
                ws: true, //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            },
        },
    }
}

之后就可以愉快的进行跨域了，但是在实际工作中，这种前端跨域的方式我个人并不是很建议使用，因为在过程中会有许多的不方便之处，所以在真正项目开发的时候还是建议多和后端沟通需求，让后端配置跨域的话前端直接进行正常开发即可