第一次進行vue的框架搭建,遇到了太多的坑,只能一邊跳坑,一邊填坑,希望最後別把自己給埋了。
以下是在使用proxy代理設置跨域時的問題:
解決方法:
在src/utils/request.js文件中將baseURL註釋掉便可以,因爲既然已經配置代理了,axios就不需再設置baseURL了,不然就不會經過代理處理。
// create an axios instance
const service = axios.create({
//baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
再說一下proxy代理設置
vue.config.js文件:
module.exports = {
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
port: port,
open: true,
https: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/oraflapi': {
target: process.env.VUE_APP_BASE_ORAFLAPI, // 目標 API 地址
changeOrigin: true, // 允許websockets跨域
ws: true,
pathRewrite: {
'^/oraflapi': '/oraflapi'
}
},
'/bsw': {
target: process.env.VUE_APP_BASE_BSW ,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/bsw': '/bsw'
}
},
'/oraflfile': {
target: process.env.VUE_APP_BASE_ORAFLFILE ,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/oraflfile': '/oraflfile'
}
},
},
},
}
.env.development文件:
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_ORAFLAPI = 'http://10.6.132.113:8080'
VUE_APP_BASE_BSW = 'http://10.6.132.113:8100'
VUE_APP_BASE_ORAFLFILE = 'http://10.6.132.113:8263'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
api.js文件中調用接口:
import request from '@/utils/request'
export function fetchList(data) {
return request({
url: '/oraflapi/queryAssetListPage',
method: 'post',
data
})
}
以上就是本次遇到的問題了。如果您覺得解決了問題,可以給我一個贊以示鼓勵呀,共勉。