之前项目都是团队开发的,可能我接触到的也没有那些什么跨域的问题,只要负责页面逻辑编写就好了,最近我单独负责一个后台管理系统前端的工作,遇到一些跨域的问题。比如: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了!!