vue项目打包后代理接口报404错误的前端解决方案

最新推荐文章于 2024-06-20 23:47:10 发布
最新推荐文章于 2024-06-20 23:47:10 发布
阅读量1.4w 收藏 25
点赞数 2
分类专栏： vue 文章标签： vue js axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42258621/article/details/103065050
版权

vue项目打包后代理接口报404错误的前端解决方案

vue的项目中使用axios发送ajax请求，因为跨域，使用了proxy反向代理，开发环境测试没有问题，但是项目打包放到生产环境时报404错误，查了一下解决方案，可以后端设置nginx解决，但是我们这个项目服务器没用nginx，所以提供一个前端的解决方案

一般这种情况，都是在前端使用了反向代理
在这里插入图片描述
开发环境中，图中的rongda-home就会代替target中地址，但是在线上环境中，rongda-home变成字符串，所以出现404.

解决方法，利用axios拦截器，把rongda-home替换

在这里插入图片描述

南山路口
关注
  • 2
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
vue打包axios请求报404_vue+axios+eggjs前后端分离打包部署之后访问接口404
weixin_35315373的博客
12-24 534
vue打包之后部署服务器访问服务器端接口4041.vue+axios本地开发环境请求线上服务器接口跨域没有问题开发环境跨域配置// vue.config.jsdevServer: {proxy: {[process.env.VUE_APP_BASE_API]: {target: 'http:xx.xx.xx', //对应跨域的接口changeOrigin: true,ws: true,pathR...
web应用程序配置服务端口，采用Nginx作反向代理时，访问网页出现404的问题解决的分析过程和解决方法
最新发布
weixin_70208651的博客
06-20 2946
人脸识别系统使用8800作服务端口，现要在nginx上设置反向代理，使nginx监听7200端口，并将来自该端口的请求转发至原本由8800端口负责的API服务（即1212和3001端口上的API及其参数），实现了在不改变后端API配置的情况下，通过7200端口进行网页访问的功能，但是出现了404错误。检查与代理和重定向相关的部分，重定向跳转是Nginx服务器提供的一项功能，它允许管理员配置服务器，以便在客户端访问特定URL时，自动将其请求重定向到另一个URL；主要通过Nginx配置文件中的重写指令来实现。
vue打包代理接口404
指尖下的精灵
07-31 3791
一般这种情况，都是在前端配置了反向代理，如下图： 图中的 api 就可以代替 target 中的后台地址，这个在线上环境是有问题的，api 在线上环境就变成了字符串，所以所有接口都会出现404问题 前端解决方案如下： 在项目目录中添加 .env 文件，配置线上打包地址 在 main.js 中打印查看是否正确 添加 axios 拦截器，线上环境把 /api 截取掉 OK，这样接口404问题就...
vue 打包后页面404
小耳朵晨晨
01-14 997
或者用# 模式的路由，或者修改nginx里的配置 nginx.conf location / { root html; index index.html index.htm; try_files $uri $uri/ @router; } location @router { rewrite ^.*$ /index.html last; } ...
VUE打包部署完成之后 刷新页面404
slilx的博客
09-02 154
将此内容加到 伪静态即可实现 Ctrl+R强制刷新网页不报404的问题。其他的出错方式正在收集。我是用的宝塔面板使用。
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
12-09
在Vue项目中，当使用Webpack进行打包并将应用部署到Tomcat服务器时，可能会遇到一个常见的问题：用户在页面刷新后收到404错误。这个问题的根本原因在于Vue Router的`history`模式。Vue Router的`history`模式利用了...
vue项目打包之后背景样式丢失的解决方案
10-17
在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue项目打包后怎样优雅的解决跨域
12-12
在使用vue.js开发前端项目时，再结合webpack搞起各种依赖、各种插件进行开发，无疑给前端开发带来了很多便捷，就在解决跨域这个问题上，相信众多用vue.js的前端同僚们同我一样尝到了甜头，开发环境全靠proxyTable...
vue打包后路径404问题解决方法
S筱潇S四维Smile
11-12 3468
1、静态文件路径错误 找到config文件夹下的index.js文件修改以下位置 assetsPublicPath: './', 2、在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改以下位置 publicPath:'../../' 3、修改build文件夹下的webpack.prod.conf.js 修改以下位置 p...
vue-cli 项目打包后 代理接口报404错误 解决办法！
Ryan1437520的博客
08-23 2万+
1、启动nginx          cd usr/local/nginx/sbin         ./nginx 2、找到nginx安装目录     whereis nginx     cd usr/local/nginx/ 3、打开nginx 配置文件     cd conf/     vi nginx.conf    按i 修改，新增配置 location /api {...
vue用两种路由模式(hash、history)实现导航栏
王永存
08-18 8886
一般的网站都会有导航栏，导航栏一般要求：有选中状态，点击加载对应页面，并给个选中状态，刷新之后选中不能消失，页面也要是对应的页面，点击浏览器上的前进和后退也要好使。这些东西在多页应用上可能考虑的不是太多，但是在vue单页应用上就不得不考虑了。使用vue-cli搭建好脚手架，然后用vue-router提供的两种路由来实现导航栏。写一个简单的demo，效果如下： hash模式： vue-cli...
VueCil代理本地proxytable无效报错404的解决方案
JCat的博客
04-29 9869
前言 因为项目中遇到了这个bug：Vue代理本地proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人； 正文 1. 为什么要使用代理？ 代理的作用是：把请求代理转发到其他服务器的中间件； 例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请...
vue打包部署服务器后前端访问页面出现404
超小少的博客
04-13 3339
最近项目打包部署至服务器后，通过前端访问，页面能进入vue路由写的404页面，但是无法进入其他页面，网上也看过一些文章，说的是需要后端进行相应配置，并开启伪静态，而我们项目的后端并未使用伪静态，然后前端做了修改。 在vue-router路由对象中，路由有两种模式：hash和history，而我一般使用history模式，在history模式下，前端路由须和向后端发起请求的路由一致，如http://...
vue代理配置没问题但是报错404
onecaicai的博客
11-13 523
vue代理没错但是报错404
vue打包上线报错404
weixin_39838846的博客
05-14 875
vue 打包之后上线报错 比如：访问不到app.js 404 问题这种的，查看index.html文件中是否绝对路径，如果是绝对路径就会报错。绝对路径就是 /app.js类似这样 相对路径./app.js 正常配置 错误配置 或者不配置 publicPath 都会导致打包上线错误 ...
vue填坑之webpack run build 静态资源找不到
热门推荐
qq_30346089的博客
09-12 2万+
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常,run build后放到线上找不到静态资源文件路径，最后终于解决
关于vue打包后上传服务器刷新404的问题
raik520的博客
09-25 944
一：nginx服务器解决方案，修改 .conf 配置文件 有两种解决方案 1： location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2： location / { ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值