用代理解决axios跨域问题以及打包后的宝塔反向代理

1.概述

由于浏览器端和后端进行通信连接时存在着同源策略的限制，会出现CORS跨域问题，例如在端口不同、协议不同、域名不同的情况下，两端的通信会被中断。而vue中进行http连接使用最多的方法就是axios，因此这篇博客用来介绍一种常见的解决跨域问题的方法，即配置代理方法。

2.实现

• 1.在main.js引入axios，原型挂载axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
/* 导入全局样式表 */
import './assets/css/global.css'

/* 引入axios */
import axios from 'axios'
/* 设置请求头，解决token问题 */
axios.interceptors.request.use(config=>{
  config.headers.Authorization=window.sessionStorage.getItem('access_token')
  return config
})
Vue.prototype.$http=axios

/* 引入重新渲染的全局方法 */
Vue.forceUpdate

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

• 2.在vue.config.js设置代理

 /* 使用代理解决跨域问题 */
  d