前端部署項(xiàng)目后nginx轉(zhuǎn)發(fā)接口404(頁面正常)詳解
本來很簡單的一個(gè)事,結(jié)果老是報(bào)錯(cuò),郁悶的睡不著,于是半夜起床擼起袖子干……
最后功夫不負(fù)有心人,終于找到解決方法并且成功了。
2. 場(chǎng)景復(fù)現(xiàn):前端部分是用的vue3,本地代理什么的一切正常,然后前端打包生成dist文件,然后放到服務(wù)器上(你要記得存放的路徑),現(xiàn)在都是前后端分離開發(fā),之前我部署都是前后端在一個(gè)服務(wù)器上,這次后端部署在A服務(wù)器,我部署在B服務(wù)器。
本來按照正常思路都是修改nginx的conf文件,然后加一個(gè)location /api之類的就夠了,但是這次卻出問題了。
3.問題的原因:這次問題的核心是:
之前我是這么寫的(錯(cuò)誤)
location ^~ /v1 {proxy_pass https://XXXXX.neimeng.seetacloud.com:6443/api/; }后來我是這么寫的(正確)
location /v1 { proxy_pass https://XXXXXXeimeng.seetacloud.com:6443/api/v1;}其實(shí)區(qū)別就是最后加了一個(gè)/v1
也是今天出的最大問題:那就是—— /v1 在轉(zhuǎn)發(fā)的時(shí)候不會(huì)帶上/v1; 而 /v1/ 這么寫會(huì)帶上/v1
4.使用nginx一般要注意的小細(xì)節(jié):1. location / 寫在下面,其他的轉(zhuǎn)發(fā)如/v1寫在上面
2.如何查看nginx轉(zhuǎn)發(fā)請(qǐng)求到哪里了?
在serve里面, location / {} 上面粘貼即可
add_header backendCode $upstream_status; add_header BackendIP '$upstream_addr;' always;3.怎么寫自己的前端路徑?
在location里面 root 的右邊寫(格式參考C語言),上圖紅色框標(biāo)識(shí)了。
5.使用nginx常用的命令:1. 查看所有運(yùn)行中的nginx進(jìn)程
tasklist | findstr nginx2.刪除某個(gè)運(yùn)行中的進(jìn)程
taskkill /pid 3584(具體的進(jìn)程pid可以根據(jù)上面的命令自己看) /f3.檢查conf配置文件是否有錯(cuò)誤
nginx - t4.重啟nginx
nginx -s reload 6.常用nginx配置文件(可以參考,根據(jù)自己實(shí)際項(xiàng)目修改一下即可)#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info; #pidlogs/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; sendfileon; #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;# includefastcgi_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; # } #}}總結(jié)到此這篇關(guān)于前端部署項(xiàng)目后nginx轉(zhuǎn)發(fā)接口404(頁面正常)的文章就介紹到這了,更多相關(guān)前端nginx轉(zhuǎn)發(fā)接口404內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
