解决Vue项目部署到服务器之后前端向后端发送请求报错404的问题(centos使用docker实现nginx的反向代理)

场景重现:

由于现在流行前后端分离的部署方式,但是按照正确方法部署(如何部署可参考:)之后,发现明明前后端都部署好了并且运行成功,但是前端发送的请求都是404。明明在vue项目中配置了跨域的相关设置:

ps:本地配置跨域请参考:什么是跨域?如何解决跨域问题?-CSDN博客 

明明没问题,为什么就是发不过去呢,这是因为在本地环境下,这个配置是有效的,但是执行npm run build之后,并不会对这部分打包,也就是说即使你本地已经配置好了,但是打包好的dist文件里面并没有这部分,这就需要配置nginx,通过nginx代理到后端的端口。

话不多说,我们直接看如何操作。

开始解决:

首先我们检查nginx是否启动,输入:

docker ps

 

可以看到是正常启动的,然后我们进入容器内部:

docker exec -it nginx bash

注:nginx为你的容器名,也可以使用容器id,成功进去之后,显示容器id: 

如果显示一个类似于:is restarting的错误,反正就是没进来,提示有一个error,那就执行:(成功进来就不用管了,跳过就行)

docker stop nginx

docker start nginx

 重新启动容器就行,如果还是不行,那就是你的配置或者run命令出现了问题,直接stop容器,然后docker rmi nginx重新执行一遍run命令即可,本人的run命令如下,可作为参考:

  docker run -d -p 80:80 --name nginx  -v /home/nginx/dist:/usr/share/nginx/html --restart=always nginx

进来容器之后,我们进入配置文件目录:

cd /etc/nginx

可以看到,里面就有nginx.conf,不过我们的目标不在这里,而是前面的conf.d,不过我们也可以看一下nginx.conf里面是什么:

ps:如果是第一次进入容器,需要先执行下面两条命令下载vim编辑器

apt-get update

apt-get install vim 

下载完成(下载会比较慢,不用着急,下载过程大概需要五分钟左右)之后直接输入:

vi nginx.conf 

回车进入配置文件: 

其实你可以看到,他关于server的设置都是在conf.d下的*/conf文件中

然后我们按下键盘的esc键,输入:wq退出即可(包括冒号)。然后我们进入conf.d中

可以看到只有一个文件,我们输入:

vi default.conf

 进入配置文件

你们进来是没有红框里面的内容的,这也是需要加进来的配置:

location /api/ {

         proxy_pass  http://localhost:8080/;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
}

 切记把api替换成你前端代理的地址(一般人都是api),然后把localhost换成你服务器的地址,尽量不要用localhost。

location在监听到前端发送请求之后,如果你的路径中带有api,就会自动转发到你指定的地址,这样就实现了nginx的反向代理,同时,你也可以实现多端的发送,可以设置多个location,可以代理到多个后端接口。设置完成之后保存退出即可,按下esc,输入:wq(包含冒号)。重启nginx即可:

docker restart nginx

查看是否启动成功:

docker ps 

总结&可能出现的错误

最后,修改配置文件的时候注意一定要细心,比如 location /api/,location后面是有空格的,最后面的/不要丢掉,服务器路径后面的/也不要丢掉,后面的分号也必须要有,分号(;)代表语句的结束,没有分号就会连着执行两条语句,就会报错。

最后的最后,我们来分析并解决一下你可能会出现的问题,或者已经出现了的问题。

首先就是最后重启nginx之后,发现输入docker ps发现没有nginx,然后输入docker ps -a,发现有nginx这个容器,但是没有端口。这时候可以输入:

docker logs nginx

 查看nginx的启动日志,你发现最下面报了好几个error,针对不同的错误去做不同的解决方式,但是,由于你只进行了本文的conf配置文件配置修改,那就是说只有一个原因:你的配置文件写错了。由于你的nginx启动不了,你也没有办法进入容器重新查看配置文件,你只能docker rmi nignx,然后重新执行一遍run命令。然后重新配置一遍,这次一定要检查好有没有输错,缩进分号有没有按照要求来。

如果是ps发现跑起来了,但是没有端口,那就是端口被占用了或者是其他一些原因了,这个很容易解决,端口被占用,kill掉就可以,其他原因大概率也是nginx本身的原因,看一下是不是你的run命令写错了,stop掉然后rmi之后重新run一遍吧。

最后就是挂载的问题,我建议把nginx的html挂载到主目录的某个文件下,但是不建议挂载配置文件,第一是我认为配置文件一般只需要配置一次即可,特别是服务器上的,第二是如果挂载文件和被挂载文件不同的话,是有一定可能出现问题的,第三也是为了安全性,还是让他就在容器里面呆着吧。

作为一个加起来只有七个月开发时间的全栈工程师,还没入门,不过好像依稀已经可以看得到远方的门槛了,我还有很长的路要走,本文也是我的一点经验,文章略显稚嫩,希望各路大神可以指点一二,也预祝大家从此没有bug,在全栈和架构师的道路上越走越远!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/15377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Boot】深度复盘在开发搜索引擎项目中重难点的整理,以及遇到的困难和总结

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:【Spring Boot】深度复盘在开发搜索引擎项目中重难点的整理,以及遇到的困难和总结 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 什么是搜索引…

Sql语句DML操作 增删改

DML 数据操作 增删改 插入数据 方式1: INSERT INTO 表名(列1,列2……,列n) VALUES(值1,值2…..,值n);方式2: INSERT INTO 表名 set 列名1值1,..列名;方式3: INSERT INTO 表名(列1,列2……,列n) VALUES(值1,值2…..,值n),(值1,值2…..,值n);方式4: INSERT INTO 表名(列1,列2……

AJAX初级

AJAX的概念: 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中,使用 AJAX技术(XHR对象)发起获取省份列表数据的请求,服务器代码响应准备好的省份列表数据给前端,前端拿到数据数组以后&#xf…

常见网络协议及端口号

https://www.cnblogs.com/Snail-yellow/p/17722411.html 常见的网络协议-腾讯云开发者社区-腾讯云 常见的网络协议知识整理_五种常用的网络协议-CSDN博客 端口 协议 常见的网络协议_计算机网络协议有哪些csdn-CSDN博客 ​​​​​​​​​​​​​​协议 常见的网络协议知…

二叉树前中后序遍历

前言 个人小记 一、代码如下 #include<stdio.h> #include <stdlib.h> #include <time.h> #define MAX_NODE 10 #define p()\ {\printf("\n");\ } typedef struct Node {int key;int lfag,rfag;struct Node *lchild,*rchild; }Node;Node* init_no…

TENT: FULLY TEST-TIME ADAPTATION BY ENTROPY MINIMIZATION--论文笔记

论文笔记 资料 1.代码地址 https://github.com/DequanWang/tent 2.论文地址 https://arxiv.org/abs/2006.10726 1论文摘要的翻译 在这种完全测试时适应的情况下&#xff0c;模型只有测试数据和自身参数。我们建议通过测试熵最小化&#xff08;tent&#xff09;进行适应&…

虚拟化技术[2]之存储虚拟化

存储虚拟化 存储虚拟化简介存储虚拟化一般模型存储虚拟化实现方式基于主机存储虚拟化基于存储设备存储虚拟化基于网络存储虚拟化 案例分析&#xff1a;VMFSVMFS功能 存储虚拟化简介 存储虚拟化&#xff1a;将存储网络中的各个分散且异构的存储设备按照一定的策略映射成一个统一…

C++学习笔记(19)——模板

目录 模板参数与非类型模板参数 模板参数 类型模板参数——传递类型 非类型模板参数——传递数量 C11希望array替代静态数组&#xff0c;但实际上vector包揽了一切 模板总结 优点&#xff1a; 缺点&#xff1a; 模板特化&#xff1a;针对某些类型进行特殊化处理 特化…

大模型的快速成长

大模型的关键要素有三点,数据&#xff0c;算法和进化的方式. 首先&#xff0c;数据是基础。大量且高质量的数据对于大模型的成长至关重要。不断收集涵盖更广泛领域、更丰富细节的数据&#xff0c;并且确保数据的准确性和代表性。只有在充分的数据滋养下&#xff0c;大模型才能更…

P451 try-Catch异常处理

//基本使用演示代码 public static void main(String[] args) { int num1 10; int num2 0; try { int res num1 / num2; }catch (Exception e) { System.out.println(e.getMessage()); } } public class TryCatchDetail { public static void main(String[] args) { //1. 如…

ubuntu20.04 终端 设置字体大小

##ubuntu20.04 Terminal 终端 设置字体大小 ##打开Terminal 终端&#xff0c;点击Preferences设置字体大小 ##点击unnamed选项卡&#xff0c;打钩Custom font 设置 字体大小

SQL、Mongo、Redis一般适用于那些场景

在一个项目中同时使用 MySQL、Redis 和 MongoDB 是相对常见的做法&#xff0c;因为它们各自具有不同的特点和适用场景&#xff0c;可以组合使用以满足不同的需求。下面是它们的一些常见用途和特点&#xff1a; MySQL&#xff1a; 关系型数据库&#xff1a; MySQL 是一个传统的关…

topsis综合评价法

TOPSIS综合评价法&#xff08;Technique for Order Preference by Similarity to Ideal Solution&#xff09;是一种多目标决策分析中的有效方法&#xff0c;也被称为优劣解距离法。该方法基于评价对象与理想化目标的接近程度进行排序&#xff0c;从而评估现有对象的相对优劣。…

三前奏:获取/ 读取/ 评估数据【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 前面的博客 数据分析—技术栈和开发环境搭建 …

二叉树——堆详解

目录 前言&#xff1a; 一、堆的结构 二、向上调整和向下调整 2.1 向上调整 2.2 向下调整 2.3 向上调整和向下调整时间复杂度比较 三、堆的实现 3.1 堆的初始化 3.2 堆的销毁 3.3 堆的插入 3.4堆的删除 3.5 取堆顶元素 3.6 对堆判空 四、堆排序 五、TOP-K 问题 六、代码总…

基于Vue2与3版本的Element UI与Element Plus入门

基于Vue2与3版本的Element UI与Element Plus入门 Element UI 入门安装引入 Element UI使用组件 Element Plus 入门安装引入 Element Plus使用组件 常用组件自定义主题兼容性和升级社区和支持 Element UI 入门 Element UI 是基于 Vue 2.0 的桌面端组件库&#xff0c;它提供了一…

js报错replaceAll不是一个function(特定设备),如何在平板中展示前端控制台

工作记录-前端——replaceAll方法不兼容以及如何在平板调试前端代码&#xff08;看到控制台报错信息&#xff09; 创作场景如何在平板显示控制台第一步第二步 关于replaceAll不兼容问题相同点不同点 如何识别粘贴操作中的换行符下课 创作场景 公司项目要求兼容pc、平板、手机等…

你真正了解 Java 中的 Date 类吗?以及如何正确使用它

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

STC15W408AS读FM24C64写内部IAP点阵显示

#include <reg52.h> //上电后写字符表内容到内部EEPROM #include <intrins.h> //从内部EEPROM取数据显示 #define uchar unsigned char #define uint unsigned int #def…

pygame raycasting纹理

插值原理 原理 color&#xff08;x&#xff09;(x-x1)/(x2-x1)(color2-color1)color1 x1<x<x2 假如说x伪3 那么color&#xff08;3-x1&#xff09;/(x2-x1)(color2-color1)color 可是图片纹理 这里不需要两种颜色&#xff0c;只需要获得碰撞点坐标后&#xff0c;如果…