vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决
vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决
·
解决proxy代理跨域,服务器部署接口404问题:
1、在vue项目的config/index.js文件中的配置
proxyTable: {
// 代理接口解决跨域问题
'/api': {
target: 'http://127.0.0.1:8080',//这里改你要跨域的地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
},
2、服务器的nginx配置文件在server里面加上:
location ^~/api/ {
proxy_pass http://127.0.0.1:8080/;//你要请求的地址,与上面index.js文件配置的地址一致
}
3、重启nginx服务,即可解决服务器部署接口请求404的问题。
解决vue项目的history模式刷新造成的页面404
1、服务器的nginx配置文件在server里面加上:
location / {
try_files $uri $uri/ /index.html;
}
2、重启nginx服务,即可解决解决vue项目的history模式刷新造成的页面404的问题。
注意:使用该方法,你需要在前端vue项目配置一个404的页面路由,但访问不存在的页面时跳转到自定义的404页面。
更多推荐
已为社区贡献4条内容
所有评论(0)