vue + element 后台管理系统 解决跨域的问题

之前项目都是团队开发的，可能我接触到的也没有那些什么跨域的问题，只要负责页面逻辑编写就好了，最近我单独负责一个后台管理系统前端的工作，遇到一些跨域的问题。比如：post请求会请求两次什么的，头部cookie带不过去等等，所以我想把自己踩过的坑分享一下。

从开始的问题说起 首先你会起一个本地的服务器 npm run dev

与后端对接的时候 访问接口 获取数据

如果你什么都不设置 接下来访问到的接口肯定是会报404的，首先 你要去config目录下新建一个proxyConfig.js，代码如下：
module.exports = {
proxy: {
‘/apis’: {
target: ‘http://192.168.xx.xxx:83’, // 接口域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/apis’: ‘’ //需要rewrite的,
}
}
}
}
设置好了以后 在config 的index.js 里面引入代码如下
‘use strict’

const path = require(‘path’)
const proxyConfig = require(’./proxyConfig’)

module.exports = {
dev: {
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: proxyConfig.proxy,

host: 'localhost',
port: 1124, 
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: false,
poll: false, 
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-source-map',
cssSourceMap: false

},

build: {
index: path.resolve(__dirname, ‘…/dist/index.html’),

assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

productionSourceMap: false,
devtool: 'source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report || false,
generateAnalyzerReport: process.env.npm_config_generate_report || false

}
}
然后 我们去 http拦截器里面设置 request.js里面设置如下：
const service = axios.create({
baseURL: ‘/apis’, // 这里是为了对应上面代理的接口加在每个请求的前面
timeout: 500000 // 请求超时时间
})
这样的话 我们就解决了 http请求跨域的问题。

我上面说的post请求 发送两次的问题 ,直接 npm install qs

在 request.js里面 引入，代码如下

import qs from ‘qs’

// request拦截器
service.interceptors.request.use(
config => {
if(config.method === ‘post’){
config.data = qs.stringify(config.data)
}
return config;
},
// error => {
// // Do something with request error
// console.log(error) // for debug
// Promise.reject(error)
// }
)
这样就 OK了！！