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

 更新时间:2023年06月16日 10:32:27   作者:接着奏乐接着舞。  
一个网站项目,肯定是避免不了404页面的,下面这篇文章主要给大家介绍了关于前端部署项目后nginx转发接口404(页面正常)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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;
    #    }
    #}
}

总结

到此这篇关于前端部署项目后nginx转发接口404(页面正常)的文章就介绍到这了,更多相关前端nginx转发接口404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nginx中定义404页面并且返回404状态码的正确方法

    Nginx中定义404页面并且返回404状态码的正确方法

    这篇文章主要介绍了Nginx中定义404页面并且返回404状态码的正确方法,本文在一次AJAX调用时发现了这个问题,服务器返回了一个404页页但没有返回404状态码,需要的朋友可以参考下
    2014-08-08
  • 使用nginx方式实现http转换为https的示例代码

    使用nginx方式实现http转换为https的示例代码

    这篇文章主要介绍了使用nginx方式实现http转换为https的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 使用nginx模拟进行蓝绿部署的方式

    使用nginx模拟进行蓝绿部署的方式

    今天小编就为大家分享一篇关于使用nginx模拟进行蓝绿部署的方式,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • 高性能WEB开发 nginx HTTP服务器篇

    高性能WEB开发 nginx HTTP服务器篇

    新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。
    2010-05-05
  • k8s部署ingress-nginx的方法步骤

    k8s部署ingress-nginx的方法步骤

    k8s集群服务部署好之后,需要对外提域名访问,这时候就需要ingress-nginx了,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 通过Nginx的proxy_set_header设置请求头无效的解决

    通过Nginx的proxy_set_header设置请求头无效的解决

    这篇文章主要介绍了通过Nginx的proxy_set_header设置请求头无效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 部署Nginx+Apache动静分离的实例详解

    部署Nginx+Apache动静分离的实例详解

    Nginx不仅能作为Web服务器,还具有反向代理、负载均衡和缓存的功能,这篇文章主要介绍了部署Nginx+Apache动静分离的实例代码,需要的朋友可以参考下
    2019-12-12
  • 18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢)

    18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢)

    这篇文章主要介绍了18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Forever+nginx部署Node站点的方法示例

    Forever+nginx部署Node站点的方法示例

    这篇文章主要介绍了Forever+nginx部署Node站点的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • nginx centos 服务开机启动设置实例详解

    nginx centos 服务开机启动设置实例详解

    这篇文章主要介绍了nginx centos 服务开机启动设置实例详解的相关资料,这里对服务开机启动做了详细的步骤介绍,需要的朋友可以参考下
    2016-11-11

最新评论