如题:
postman中测试通过的原始url地址为:
http://192.168.5.219:8082/api/getLocoStateInfo
之前根据网上找到的资料, 对vue项目的跨域配置如下:
config/index.js中跨域配置如下:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://192.168.5.219:8082',
changeOrigin: true, //是否允许跨越
pathRewrite: {
'^/api': '',
}
}
},
main.js中配置如下:
//配置axios
import axios from 'axios'
import qs from 'qs';
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//配置axios调用接口时的默认前缀为api
axios.defaults.baseURL = 'api'
页面使用axios调用接口的代码如下:
queryPieChartParamsOfLJ(){
var _this = this;
var send_url="/api/getLocoStateInfo"
var params = {
"bureauName":"西安局",
"depotName":"",
"locoType":"",
"flag":"01"
};
params = this.$qs.stringify(params);
this.$axios({
url: send_url,
method: 'post',
data: params
}).then(function (response) {
//console.log(response.data);
}).catch(function (error) {
alert("查询数据失败!"+error);
}).then(
);
},
在npm run dev模式下运行vue前端项目, 页面上访问该接口是能够获得返回结果的, 结果如图所示
但是使用npm run build命令将vue前端项目打包之后的静态资源, 放到上述接口所在的后端程序中时, 接口就报404了.
静态资源位置如下:
部署到springboot项目中, 接口请求结果如下:
这是我的跨域配置有问题吗? 请各位大神指点
post请求静态资源失败应该是nginx反向代理配置的问题
你这种是前后端分离的项目,我也有遇到过。1.有可能是你把打包的项目放到后台程序上,是以什么作为你接口的转发呢,我之前就是以为可以在tomcat上运行的,但是发现tomcat不能代理转发接口,请求就报404的;2.有可能是你的配置有问题,你的请求后台接口都是以/api开头的,你可以在这样配置下,接口用api去匹配下,如下