nginx访问静态页面(ajax再调用nginx地址访问java后台)

本文介绍如何使用Nginx配置静态页面访问及动态接口代理,实现前后端分离项目的高效部署。通过具体示例,详细解释Nginx配置文件中listen、server_name、root指令的应用,以及location块中proxy_pass等指令的设置,实现静态资源和动态数据的无缝结合。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在跟着视频做小示例,并发方面的,然后敲示例的过程中,发现nginx还可以这样使用,在实际使用nginx有限的我,觉得还是应该记录一下这种思想

首先,你先有html页面,后台生成的也好,还是前后端分离也好,我的页面在如下目录里

 

 

然后配置nginx的config文件,在server模块里

 

 server {
        listen       80; #代理后要访问的端口
        server_name  localhost;  #指定访问的连接
		root E:/项目学习/babytun/; #访问静态页面
		#index index.html;
	}

然后通过nginx访问页面,通过80端口,寻找E盘下的html页面


 然后页面里的评论是实时,需要动态添加的,也就是ajax获取后台数据的,这里面就需要nginx配置评论接口定位映射到后台接口去

 需要配置nginx的config文件

 server {
        listen       80; #代理后要访问的端口
        server_name  localhost;  #指定访问的连接
		root E:/项目学习/babytun/; #访问静态页面
		#index index.html;
		#将80端口映射路径地址,将其可以访问系统
		location /staticHtml/evaluate/ {
		  proxy_pass http://localhost:8081/evaluate/;#访问后台接口
		  proxy_set_header Host $host;#辅助
		  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#辅助

		}
}

然后就变成也是通过nginx加载数据了,nginx是一个比较高效的web服务器

### H5 应用在 Nginx 部署时访问错误解决方案 对于H5应用部署到Nginx服务器上遇到的访问错误,通常涉及配置文件设置不当、权限不足或是路径不正确等问题。下面提供一种常见的解决方法。 #### 修改Nginx配置文件适应前端路由模式 当单页面应用程序(SPA, Single Page Application)被加载之后,所有的导航都在浏览器端处理而不会向服务器发出请求。然而,在页面或直接输入URL地址的时候,则会尝试让Web服务器解析该链接并返回相应的HTML文档。如果此时Nginx未做适当配置,就会导致找不到资源的404错误发生[^1]。 为了使Nginx能够正确响应这些来自SPA内部产生的新URL请求,可以在`nginx.conf`中的location部分加入如下指令: ```nginx server { listen 80; server_name localhost; location / { root html; try_files $uri $uri/ /index.html; # 将所有未知请求重定向至入口html文件 index index.html index.htm; } } ``` 此段代码确保任何匹配不到实际静态资源的URI都将最终指向项目的根目录下的`index.html`,从而允许JavaScript框架接管后续逻辑流程控制。 #### 设置正确的MIME类型支持现代web技术特性 有时因为缺少必要的mime.types定义或者include语句遗漏造成某些特定格式的数据无法正常显示出来。比如图片上传接口可能依赖于multipart/form-data编码方式传输二进制流数据给后端API服务;如果不指定好Content-Type头信息的话就容易引发跨域资源共享(CORS,Cross-Origin Resource Sharing)方面的问题或者是表单提交失败的情况出现。 因此建议确认站点全局配置里已经包含了标准库提供的mime.types映射关系列表,并通过add_header字段声明Access-Control-Allow-*系列参数来放宽对外部源站发起AJAX调用时所受到的安全策略限制条件: ```nginx http { include mime.types; default_type application/octet-stream; sendfile on; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; ... } ``` 上述措施有助于提高系统的兼容性和健壮性,减少由于HTTP头部缺失带来的潜在风险因素影响用户体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值