原本使用axios封装
// 创建axios实例
const service = axios.create({
baseURL: HTTP_URL, // 接口请求地址
timeout: 10000, // 请求超时时间
headers: {
'content-type': 'application/json'
},
})
在vue.config.js设置好代理
module.exports = {
lintOnSave: false,
// publicPath: process.env.NODE_ENV === 'production'
// ? '/mobile/'
// : '/',
publicPath: '/',
outputDir: '/dist',
chainWebpack: config => {
config.resolve.alias
.set("@", resolve("src"))
.set("@A", resolve("src/assets"))
.set("@C", resolve("src/components"))
.set("@V", resolve("src/views"))
.set("@STYLES", resolve("src/styles"))
.set("@API", resolve("src/api"))
.set("@U", resolve("src/utils"))
config
.plugin('html')
.tap(args => {
args[0].title = '求签'
return args
})
},
//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
open: false,
port: 8080,
proxy: {
// 因为接口请求地址是 http://xxxx.xxx.com/v1/xxx/xxx
'/v1': {
target: "http://xxxx.xxx.com/", // 后台接口域名
ws: false, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/v1': '/v1'
}
},
}
}
}
配好以后发现还是跨域了,说明代理没有生效
解决
去掉这个配置的baseURL就行了
const service = axios.create({
//baseURL: HTTP_URL, // 接口请求地址
timeout: 10000, // 请求超时时间
headers: {
'content-type': 'application/json'
},
})
或者将baseURL改为/v1/
const service = axios.create({
baseURL: "/v1/", // 接口请求地址
timeout: 10000, // 请求超时时间
headers: {
'content-type': 'application/json'
},
})