前端部署项目后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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这次我们搭建一个rtmp直播服务器，用于电脑或手机直播推流到服务器，然后其他终端如电脑或手机可以观看直播的视频画面。接下来通过本文给大家分享使用Nginx搭载rtmp直播服务器的问题，感兴趣的朋友一起看看吧2021-10-10
这篇文章主要给大家介绍了关于nginx location优先级的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了Nginx丢弃http包体处理实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家介绍了Nginx负载均衡健康检查性能提升,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了淘宝Web服务器Tengine在CentOS下的安装教程，本文同时介绍了Tengine是什么,需要的朋友可以参考下2014-07-07
Nginx 默认是不允许列出整个目录的，那么需要这样的功能怎么操作呢，下面小编给大家介绍下Nginx 禁止直接访问目录或文件的方法,需要的朋友可以参考下2022-10-10
本文主要介绍了Nginx配置本地图片服务器的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了利用Nginx处理Vue开发环境的跨域的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
本文主要介绍了nginx配置多个前端项目实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要给大家介绍了关于Nginx实现非套路镜像站的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-02-02
最新评论