前端部署項目后nginx轉(zhuǎn)發(fā)接口404(頁面正常)詳解

更新時間：2023年06月16日 10:32:27 作者：接著奏樂接著舞。

一個網(wǎng)站項目,肯定是避免不了404頁面的,下面這篇文章主要給大家介紹了關(guān)于前端部署項目后nginx轉(zhuǎn)發(fā)接口404(頁面正常)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.前言

本來很簡單的一個事，結(jié)果老是報錯，郁悶的睡不著，于是半夜起床擼起袖子干……

最后功夫不負(fù)有心人，終于找到解決方法并且成功了。

2. 場景復(fù)現(xiàn)：

前端部分是用的vue3，本地代理什么的一切正常，然后前端打包生成dist文件，然后放到服務(wù)器上（你要記得存放的路徑），現(xiàn)在都是前后端分離開發(fā)，之前我部署都是前后端在一個服務(wù)器上，這次后端部署在A服務(wù)器，我部署在B服務(wù)器。

本來按照正常思路都是修改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;
	}

其實區(qū)別就是最后加了一個/v1

也是今天出的最大問題：那就是—— /v1 在轉(zhuǎn)發(fā)的時候不會帶上/v1; 而 /v1/ 這么寫會帶上/v1

4.使用nginx一般要注意的小細(xì)節(jié)：

1. location / 寫在下面，其他的轉(zhuǎn)發(fā)如/v1寫在上面

2.如何查看nginx轉(zhuǎn)發(fā)請求到哪里了？

在serve里面， location / {} 上面粘貼即可

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

3.怎么寫自己的前端路徑？

在location里面 root 的右邊寫（格式參考C語言），上圖紅色框標(biāo)識了。

5.使用nginx常用的命令：

1. 查看所有運行中的nginx進程

tasklist | findstr nginx

2.刪除某個運行中的進程

taskkill /pid 3584（具體的進程pid可以根據(jù)上面的命令自己看） /f

3.檢查conf配置文件是否有錯誤

nginx - t

4.重啟nginx

nginx -s reload

6.常用nginx配置文件（可以參考，根據(jù)自己實際項目修改一下即可）

#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  你的服務(wù)器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;
    #    }
    #}
}