vue打包后,接口请求404的完美解决方案

在开发环境中,和后台对接为了解决跨域问题,使用了代理,也就是vue的proxyTable,但是打包放到生产环境中去时,接口请求不到,404,原因是开发环境的代理并不能用到生产环境,但是直接在请求接口是使用服务器地址,可以成功,但是会造成cookie丢失而失去权限验证

我脑海里出现有两种办法,一是使用代理,如何解决接口路径请求404的问题,二是直接写请求路径,如何解决cookie丢失的问题

之前因为cookie丢失,后台忙活了很长时间,好不容易才解决的,加之开发环境下并不会丢失,所以我的想法是继续使用代理

在网上找了很多办法,有不少人遇到这个问题,但是基本都没有详细的解决方案,好不容易才找到说可以试试用nginx反向代理的方式,OK,开干

首先,前端还是先不改动,接口路径依然是‘/api/...‘:

登录服务器,找到nginx的安装目录下:cd /etc/nginx

打开配置文件 vi nginx.conf

按  i  修改,新增

        location /api {
                proxy_set_header   Host             $host;
                proxy_set_header   x-forwarded-for  $remote_addr;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_pass http://127.0.0.1:8080; // 接口地址,如果在同一个服务器上,可以直接这样写
        }    

保存退出,先esc,然后保存   :wq!

nginx支持热启动,所以直接重启命令    service nginx reload

OK了,nginx反向代理生效了,现在可以继续用代理,接口请求成功,也不会丢失cookie,皆大欢喜,希望本文对你有所帮助!

原文地址:https://www.cnblogs.com/wangqiao170/p/9397683.html

时间: 2024-10-09 18:17:12

vue打包后,接口请求404的完美解决方案的相关文章

Vue打包后出现一些map文件

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:     去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码

vue打包后element-ui部分样式(图标)异常问题

vue项目使用element-ui组件,打包后部分样式(上下左右箭头)异常,变成方框了. 页面报warn错误,有个字体找不到. 解决办法:在build文件夹下找到utils.js,加上一行publicPath:'../../' 2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found) 原文地址:https://www.cnblogs.com/ljwsyt/p/11579370.html

vue打包后index.html界面报错

vue项目完成后,打包放到服务器上,打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到. 解决办法: 修改vue项目config文件夹下面的index.js,将assetsPublicPath:'/'改为assetsPublicPath:'./' 原文地址:https://www.cnblogs.com/luyuefeng/p/8350573.html

vue打包后出现静态资源|(图片,json数据)找不到路径

最近在学习Vue是如何编写项目的,在踩了许多坑后,终于要到了最后一步npm run build了,很开心的等待奇迹,然后打包后出现了找不到图片路径的问题. 解决办法:1.将图片或者json数据文件夹放到static的文件夹中,这样打包后webpack会自动打包 2.在build的文件夹下找到utils.js的文件,修改打包后静态资源的路径,添加 publicPath: '../../' 原文地址:https://www.cnblogs.com/klkitty/p/9099472.html

vue打包后,轮播图的动画内容位置显示不正确,且动画失效

解决方法: 1.在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction  改为extract:false 此步骤打包后解决了动画图片位置错误的问题 2.package.json配置文件里面对浏览器的版本做了css的前缀处理 此步骤解决了动画失效问题 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8

vue打包后找不到资源路径问题

问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq, req, res) { console.log("原路径:" + req.originalUrl, "代理路径:" + req.path } 打印相对路径,用于查看当前引用路径,在终端命令行中显示(不是浏览器的控制台) 原文地址:https://www.cnblog

关于vue打包后,访问不到页面和访问不到图片。

vue项目完成打包上线的时候很多人都会碰到静态资源找不到,常见的有两个第一种:js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 第二种:css中引用的图片资源找不到我的项目文件中有一段css,其中引用了一个背景图片“src/assets/”文件夹下有这张图片,打包后路径发生变化这个图片就找不到了,解决办法:打开“build/utils.js”,增加一行代码即可 原文地址:https://www.cnblogs.com/blu

要命系列-运行vue打包后的文件

如何运行打包后的dist文件看看效果,比如路径什么的有没有问题之类的,那就需要在部署前看看页面有没有崩坏. 废话不多说,看图(ps本人用的是vue-cli4) 首先npm install -g serve(全局安装),如果你网速不大好,用淘宝镜像cnpm安装也可以 再来就是在这一级目录下直接serve -s dist 就可以了 然后就可以了~ 是不是觉得很简单很假,,其实这就是不啃vue文档的后果,度娘一搜前几页基本都是安装express-generator生成器什么的~太可怕了..刚弄完vue

vue打包后显示空白正确处理方法

在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. 正确的方法步骤是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 转载:http://www.wei86.cn/article/1/cid/3.html