第一步:封装前端请求,创建utils工具类api
let base = '';
//传送json格式的post请求
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params
})
}
//传递json的put请求
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params
})
}
//传递json的get请求
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`,
data: params
})
}
//传递json的delete请求
export const deleteRequest = (url, params) => {
return axios({
method: 'delete',
url: `${base}${url}`,
data: params
})
}
注意:加上baseUrl,以防后期有需求更改
第二步:配置请求转发解决跨域
let proxyObj = {
} // 新建代理对象,对象用{}
proxyObj['/'] = {
//websocket
ws: false,
//目标地址
target: 'http://localhost:8081',
//发送请求头中host会设置成target
changeOrigin: true,
//不重写请求地址
pathRewrite: {
'^/': '/'
}
}
// 解决 端口跨域问题(根据node.js 代理对象请求转发到8081去)
// 有了代理之后,会被node.js 转发到后端的8081去,实现跨域的效果
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
// proxy 代理
proxy: proxyObj,
}
}