脚本宝典收集整理的这篇文章主要介绍了nginx 代理转发,让生产和测试环境React、Vue项目轻松访问API,前端路由不再404,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些需求,需要搭建一个静态服务,路由在前端,前端请求API,需要到代理到API服务器,图片资源需要代理到图片资源服务器。这里持续更新修正
upstream server-api{
# api 代理服务地址
server 127.0.0.1:3110;
}
upstream server-resource{
# 静态资源 代理服务地址
server 127.0.0.1:3120;
}
server {
listen 3111;
server_name localhost; # 这里指定域名
root /home/www/server-statics;
# 匹配 api 路由的反向代理到API服务
location ^~/api/ {
rewrite ^/(.*)$ /$1 break;
proxy_pass http://server-api;
}
# 假设这里验证码也在API服务中
location ^~/captcha {
rewrite ^/(.*)$ /$1 break;
proxy_pass http://server-api;
}
# 假设你的图片资源全部在另外一个服务上面
location ^~/img/ {
rewrite ^/(.*)$ /$1 break;
proxy_pass http://server-resource;
}
# 路由在前端,后端没有真实路由,在路由不存在的 404状态的页面返回 /index.html
# 这个方式使用场景,你在写React或者Vue项目的时候,没有真实路由
location / {
try_files $uri $uri/ /index.html =404;
}
}
以上是脚本宝典为你收集整理的nginx 代理转发,让生产和测试环境React、Vue项目轻松访问API,前端路由不再404全部内容,希望文章能够帮你解决nginx 代理转发,让生产和测试环境React、Vue项目轻松访问API,前端路由不再404所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。