在平時(shí)本地開(kāi)發(fā)過(guò)程中称杨，容易遇到跨域問(wèn)題，導(dǎo)致接口無(wú)法調(diào)通。這時(shí)候有多種方式解決云挟，
- 后端支持CORS
- nginx反向代理
- 使用jsonp請(qǐng)求
- 使用http-proxy-middleware代理
下面介紹的這種方式是webpack自帶的devServer，devServer中集成了http-proxy-middleware转质。配置devServer的proxy選項(xiàng)即可园欣。代碼如下：
// 以下代理作用 => 替換/api為localhost:3000/api，并且修改cookie的path
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
onProxyRes: function(proxyRes, req, res) {
var cookies = proxyRes.headers['set-cookie'];
var cookieRegex = /Path=\/XXX\//i;
//修改cookie Path
if (cookies) {
var newCookie = cookies.map(function(cookie) {
if (cookieRegex.test(cookie)) {
return cookie.replace(cookieRegex, 'Path=/');
}
return cookie;
});
//修改cookie path
delete proxyRes.headers['set-cookie'];
proxyRes.headers['set-cookie'] = newCookie;
}
}
}
}
假設(shè)使用axios進(jìn)行http請(qǐng)求
const api = axios.create({
baseURL: '/api'
})
而接口配置類(lèi)似如下休蟹，則會(huì)請(qǐng)求http://localhost:3000/api/getMenuList的接口：
export default {
// 獲取菜單列表
async getMenuList (params) {
let res = await api.get('/getMenuList', {
params: params
})
return res
}
}
proxy還有一個(gè)rewrite功能,如下
以下代理作用 => 替換/api為localhost:3000沸枯，并且修改cookie的path
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
onProxyRes: function(proxyRes, req, res) {
var cookies = proxyRes.headers['set-cookie'];
var cookieRegex = /Path=\/XXX\//i;
//修改cookie Path
if (cookies) {
var newCookie = cookies.map(function(cookie) {
if (cookieRegex.test(cookie)) {
return cookie.replace(cookieRegex, 'Path=/');
}
return cookie;
});
//修改cookie path
delete proxyRes.headers['set-cookie'];
proxyRes.headers['set-cookie'] = newCookie;
}
}
}
}
