项目场景：

项目场景：项目上线测试环境使用nginx代理出现问题

问题描述

通过nginx代理vue，vue再访问后端时，后端地址被替换成为了代理地址
例如：
代理地址为 127.0.0.1:8081
前端访问地址为 127.0.0.1:8888
后端访问地址为 127.0.0.1:8066

此时，正常访问的后台接口应该为 127.0.0.1:8066/xxx/xxx,但我此时的情况是 127.0.0.1:8081/xxx/xxx

原因分析：

我理解的，前端发了请求，但是请求到的是nginx，然后由nginx转发给后端，所以最终到后端的端口还得是nginx决定,个人理解不一定正确，希望有大佬指正

解决方案：

这个时候需要更改nginx配置以及前端项目配置，如下：

const request = axios.create({// API 请求的默认前缀baseURL: baseURL+"/api", //****设置好前缀，用于nginx监听之后重定地址*****timeout: 6000
})

server {listen       8081;server_name  localhost;location / {root   xxxx\dist;index  index.html index.htm;}#log设置代理地址下指定前缀的操作location /api/{rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8066;}

通过nginx代理vue，vue再访问后端时出错记录相关推荐

解决Vue跨域访问后端API问题
文章目录前言一.vue.config.js文件二.配置代理参数总结前言我们在写前后端分离的时候,请求后端接口是必要步骤,但是这个时候就有个问题,因为前端和后端是归属于不同端口,我们在直接访 ...
Nginx代理内网服务器访问外网
Nginx代理内网服务器访问外网 1.SpringBoot工程配置文件改写 2. SpringBoot静态工具类注入配置文件变量 3. SpringBoot 使用 4. 配置Nginx 问题描述: 有 ...
react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？
开发机器是windows,windows中安装了centos虚拟机做restful api服务器,在浏览器中可以正常访问该api服务器: http://192.168.33.3:8080/articl ...
vue如何通过Nginx代理做到跨域访问API接口解决404报错
最近和vue对接接口发现总是访问不到 404 发现原因是 vue 使用代理访问接口的时候前面加了一层例如访问 api/index/index 实际是 api/api/index/index 找到 ...
使用Docker安装的Nginx代理前端vue项目
本篇文章主要是记录一次使用 docker成功部署nginx之后,代理(部署)静态资源或前端vue项目,遇到的2个问题(docker安装nginx参考) 1.前置条件,防火墙关闭,开放80端口,doc ...
Vue跨域访问后端接口问题解决
VUE访问接口的时候,很可能出现跨域请求,从而被提供接口的服务器拒绝,下面这篇文章主要给大家介绍了关于Vue如何解决跨域问题的相关资料,需要的朋友可以参考下什么是跨域跨域指浏览器不允许当前页面的所 ...
Nginx代理同域名下前后端分离，有web端和微信端的项目
Nginx的安装.使用大家一定都会,也有很多教程,我记录一下配置 SSL使用的是阿里的免费SSL server {listen 443 ssl;server_name XXXXXXX.com;ssl_ ...
【vue】【todolist】【出错记录】props变化，组件页面不更新.
原因:组件被复用了出错现象:删除分组时,任务条显示的分组信息不变(数据已经变化). 原因:分组渲染任务条时,给任务条绑定的key都是任务条的id.删除分组时,任务条的key值不变,被原地复用. 解决 ...
vue引用icon字体文件时出错，These relative modules were not found: ./font/sell-icon.eot...
These relative modules were not found: ./font/sell-icon.eot... 最开始找了半天,查找是不是路径错了,改来改去还是不对结果删掉还是不行,依 ...

通过nginx代理vue，vue再访问后端时出错记录

项目场景：

问题描述

原因分析：

解决方案：

通过nginx代理vue，vue再访问后端时出错记录相关推荐

最新文章

热门文章