前端部署项目后nginx转发接口404(页面正常)

news2024/12/25 10:03:53

目录

1.前言 

2. 场景复现:

3.问题的原因:

4.使用nginx一般要注意的小细节: 

 1.  location / 写在下面,其他的转发如/v1写在上面​编辑

 2.如何查看nginx转发请求到哪里了?

 3.怎么写自己的前端路径?

5.使用nginx常用的命令:

6.常用nginx配置文件(可以参考,根据自己实际项目修改一下即可)


1.前言 

本来很简单的一个事,结果老是报错,郁闷的睡不着,于是半夜起床撸起袖子干……

最后功夫不负有心人,终于找到解决方法并且成功了。


 

2. 场景复现:

前端部分是用的vue3,本地代理什么的一切正常,然后前端打包生成dist文件,然后放到服务器上(你要记得存放的路径),现在都是前后端分离开发,之前我部署都是前后端在一个服务器上,这次后端部署在A服务器,我部署在B服务器。

本来按照正常思路都是修改nginx的conf文件,然后加一个location /api之类的就够了,但是这次却出问题了。


 

3.问题的原因:

这次问题的核心是:

之前我是这么写的(错误)

 location ^~ /v1 {
        proxy_pass https://XXXXX.neimeng.seetacloud.com:6443/api/;
    }

后来我是这么写的(正确)

location /v1 {
    	proxy_pass https://XXXXXXeimeng.seetacloud.com:6443/api/v1;
	}

其实区别就是最后加了一个/v1

也是今天出的最大问题:那就是——   /v1 在转发的时候不会带上/v1; 而 /v1/  这么写会带上/v1 


 

4.使用nginx一般要注意的小细节: 

 1.  location / 写在下面,其他的转发如/v1写在上面

 2.如何查看nginx转发请求到哪里了?

在serve里面, location / {} 上面粘贴即可


	add_header backendCode $upstream_status;
    add_header BackendIP "$upstream_addr;" always;

3.怎么写自己的前端路径?

在location里面 root 的右边写(格式参考C语言),上图红色框标识了。


 

5.使用nginx常用的命令:

1. 查看所有运行中的nginx进程

tasklist | findstr nginx

 2.删除某个运行中的进程 

taskkill /pid 3584(具体的进程pid可以根据上面的命令自己看) /f

3.检查conf配置文件是否有错误

nginx - t  

4.重启nginx

 nginx -s reload   

6.常用nginx配置文件(可以参考,根据自己实际项目修改一下即可)


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  你的服务器IP;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	add_header backendCode $upstream_status;
        add_header BackendIP "$upstream_addr;" always;

	location /v1 {
    	proxy_pass https://后端地址;
	}
		
        location / {
            root   C:/Users/你的前端文件存放目录;
            index  index.html index.htm;
	try_files $uri $uri/ /index.html;
        }
	
	

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

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

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

相关文章

实验六 自动驾驶建模与仿真

【实验目的】 了解Matlab/Simulink软件环境,熟悉Simulink建模步骤;了解车辆运动控制的基本原理,学会简单的车辆运动控制建模及仿真;了解自动驾驶建模的基本过程,了解典型ADAS系统模型的应用特点。了解自动驾驶相关函数…

【SpringCloud组件——Nacos】

前置准备: 分别提供订单系统(OrderService)和用户系统(UserService)。订单系统主要负责订单相关信息的处理,用户系统主要负责用户相关信息的处理。 一、服务注册与发现 1.1、在父工程当中引入Nacos依赖 …

JavaScript实现输入数值判断是否为质数、合数的代码

以下为实现输入数值判断是否为质数、合数的程序代码和运行截图 目录 前言 一、输入数值判断是否为质数、合数 1.1 运行流程及思想 1.2 代码段 1.3 JavaScript语句代码 1.4 运行截图 前言 1.若有选择,您可以在目录里进行快速查找; 2.本博文代码可…

通讯录实现的需求分析和架构设计

本文实现的是通讯录产品的需求分析和架构设计,重点在于结构层次的设计,方便代码阅读和维护。 一、通讯录实现的需求分析 1、通讯录的功能清单 添加一个人员打印显示所有人员删除一个人员查找一个人员保存文件加载文件 2,数据存储信息 人员…

实际开发中一些实用的JS数据处理方法

写在开头 JavaScript 是一种脚本语言,最初是为了网页提供交互式前端功能而设计的,而现在,通过 Node.js,JavaScript 还可以用于编写服务器端代码。 JavaScript 具有动态性、基于原型的面向对象特性、弱类型、多范式、支持闭包执行…

Golang每日一练(leetDay0072) 课程表 I\II Course Schedule

目录 1. 课程表 Course Schedule I 🌟🌟 2. 课程表 Course Schedule II 🌟🌟 🌟 每日一练刷题专栏 🌟 Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一…

电子邮件协议(SMTP,MIME,POP3,IMAP)

SMTP 关键词: 电子邮件协议:SMTP简单邮件传输协议,负责将邮件上传到服务器,采用TCP的25端口,C/S工作。仅传送ASCII码文本 详细介绍: SMTP是一种提供可靠且有效的电子邮件传输的协议。SMTP是建立在FTP文件传输服务上…

学系统集成项目管理工程师(中项)系列23b_信息系统集成及服务管理(下)

1. 信息技术服务 1.1. 供方为需方提供如何开发、应用信息技术的服务,以及供方以信息技术为手段提供支持需方业务活动的服务 1.2. 信息技术咨询服务、设计与开发服务、信息系统集成服务、数据处理和运营服务及其他信息技术服务 2. 信息系统审计 2.1. 收集并评估证…

Golang中的协程(goroutine)

目录 进程 线程 并发 并行 协程(goroutine) 使用sync.WaitGroup等待协程执行完毕 多协程和多线程 进程 进程就是程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位,进程是一个动态概念,是程序在执行过程中分配和管理…

C语言_用VS2019写第一个C语言或C++程序

接上一篇:C语言简述、特点、常用编译器,VS2010写第一个C语言程序 本次来分享用VS2019来写C语言或C程序,也是补充上一篇的知识,话不多说,开始上菜: 此博主在CSDN发布的文章目录:我的CSDN目录&…

微信小程序nodejs+vue+uniapp超市网上购物商城系统

超市购物系统用户端要求在系统的安卓手机上可以运行,主要实现了管理端;首页、个人中心、用户管理、商品分类管理、商品信息管理、商品入库管理、订单信息管理、订单配送管理、订单评价管理、退货申请管理、换货申请管理、系统管理,用户端&…

总结857

学习目标: 月目标:5月(张宇强化前10讲,背诵15篇短文,熟词僻义300词基础词) 周目标:张宇强化前3讲并完成相应的习题并记录,英语背3篇文章并回诵 每日必复习(5分钟&#…

4-《安卓进阶》

4-《安卓进阶》 1 Okhttp2 Retrofit3 Android常用图片库对比4 Glide原理手写图片加载框架思路5 Rxjava6 Android IPC机制(面试八股文之一)6.1.Android中进程和线程的区别6.2.IPC概念6.3.Android序列化与反序列化6.3.Android如何开启多进程?多…

MDIO总线

基于linux-3.14.16 首先要搞清楚总线的位置,即硬件上的位置 如上图,mdio总线是mac和phy之间的连接方式,主要用于配置配置phy的寄存器,所以phy应该是器的一类物理设备,mdio总线驱动和总线设备都是围绕phy工作的。 一…

一图看懂 async_timeout 模块:异步 I/O 的超时设置,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 async_timeout 模块:异步 I/O 的超时设置,资料整理笔记(大全) 🧊摘要🧊模块图🧊类关系图…

chatgpt赋能Python-pythonfrozenset

Python frozenset介绍 在Python中,可以通过frozenset创建不可变集合。与set不同,frozenset一旦被创建就无法修改。frozenset通常用于作为字典的键,因为字典键必须是不可变的。 如何创建frozenset frozenset可以通过将可迭代对象作为参数传…

Blazor实战——Known框架快速开始

Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。 开源地址: https://gitee.com/known/Known 1. 安装项目模板并创建新项目 打开命令行输入如下命令安装和创建。 -- 安装模板 dotnet n…

chatgpt赋能Python-pythonformat的用法小数点位数

Python中的format函数和小数点位数 介绍 Python中的format函数是一种格式化输出字符串的方法,允许你使用占位符来指定输出的格式。你可以使用format函数来格式化字符串,比如确定字符串的长度、插入变量或按特定格式输出字符串。 在本文中,…

Xubuntu22.04之自动调节亮度护眼redshift(一百七十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

chatgpt赋能Python-pythonfib

Pythonfib:一个优秀的计算斐波那契数列的Python函数 斐波那契数列是一种非常有趣也非常常见的数列,它起源于数学但在计算机科学中也经常被用到。Pythonfib是一个优秀的Python函数,可以用来计算斐波那契数列。本文将对Pythonfib进行详细介绍&…