h5部署在Nginx（nginx部署h5项目）

大家好！今天让创意岭的小编来大家介绍下关于h5部署在Nginx的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com

本文目录:

• 1、nodejs的转发接口遇到的问题

• 2、uniapp h5打包后跨域问题

• 3、uniapp打包h5部署服务器，apache，uniapp配置history模式

• 4、Nginx配置文件详解

一、nodejs的转发接口遇到的问题

之前在预生产环境遇到过这个问题，h5页面和API部署在不同域名下，访问接口返回值为乱码。

当时的解决办法为放在同一域名下，但是并没有解决根本问题。

现在生产环境公司要求绝对不能放在同一域名下，（一个小伙伴给的解释是抢占资源，我觉得合理）

所以当下问题就来了，搞了两天才弄明白真正原因。

第一，乱码问题

是因为nginx为了节省资源在返回html的时候会自动压缩（不知道记得对不对）

在请求的时候加上 gzip：true 即可。

第二，nginx返回404问题

乱码问题解决了以后，发现nginx返回的结果为404。

原因是headers

是因为此处传给API的headers直接复用了页面给nodejs的headers（req.headers为页面给nodejs的headers）req.headers有个参数为host指向的是h5页面的地址而不是API的地址

（猜测，加上host后nginx会根据host来找调用的API地址，因为不在同一域名下，此时host指向的是页面部署的域名而不是API部署的域名，自然找不到，这也就解释了为什么部署在同一域名时不会出现问题。

本地运行的时候，访问IP地址可以正常返回结果，访问IP对应的域名时404，是因为访问IP时不会通过nginx，所以也不会有问题）

二、uniapp h5打包后跨域问题

开发环境中设置浏览器跨域只要设置 vue.config.js 的devServer的proxy代理即可；

此时就要配置服务器（这边用的nginx代理服务器）的代理配置；

proxy_pass的匹配规则如下：

三、uniapp打包h5部署服务器，apache，uniapp配置history模式

文件内容如下：

-是的，你没有看错，就这么简单的四行

我们的项目大多会部署在二级目录下，而不是根目录下

网上大多教程让人不明觉厉

四、Nginx配置文件详解

说到该指令 ，首先得阐述一下什么是所谓的 “惊群问题”，可以参考 WIKI百科的解释。就Nginx的场景来解释的话大致的意思就是：当一个新网络连接来到时，多个worker进程会被同时唤醒，但仅仅只有一个进程可以真正获得连接并处理之。如果每次唤醒的进程数目过多的话，其实是会影响一部分性能的。

所以在这里，如果accept_mutex on，那么多个worker将是以串行方式来处理，其中有一个worker会被唤醒；反之若accept_mutex off，那么所有的worker都会被唤醒，不过只有一个worker能获取新连接，其它的worker会重新进入休眠状态。

用rewrite转发的话，url会发生变化的，那就用proxy_pass吧，于是添加了如下的配置：

在现有环境的nginx里添加这段配置之后，访问却始终转不过去，查看nginx日志也只能看到是404信息，并没有更多定位问题的信息。检查了许久也没找到原因，于是重新装了一台新nginx，里面只加上面这段配置，结果nginx是能够转发成功的，这说明单独来看这条location的配置是没有问题的，很有可能是现有环境nginx里的某些配置影响到了这个转发。

为了定位问题原因，我将aaa.example.com虚拟主机下的其他配置注意注释掉来调试，最后发现当注释掉proxy_set_header Host $http_host ;这条配置之后，就能成功转发了。这才注意到是反向代理配置的问题。现有环境中原有的配置也不能随便删掉，上网查了下原因，找到下面这种解决方案：

即，在location里面添加一条proxy_set_header Host http_host时，则不改变请求头的值，所以当要转发到bbb.example.com的时候，请求头还是aaa.example.com的Host信息，就会有问题；当Host设置为$proxy_host时，则会重新设置请求头为bbb.example.com的Host信息。

另外，关于proxy_pass转发url的参数，可以通过在location中用rewrite来做，所以完善后的配置如下：

在location用rewrite改变了URI之后，proxy_pass将使用改变后的URI。上面例子(.*)是将所有参数传给 1会拼接在 http://bbb.example.com 后面。

先来看下proxy_set_header的语法

允许重新定义或者添加发往后端服务器的请求头。value可以包含文本、变量或者它们的组合。 当且仅当当前配置级别中没有定义proxy_set_header指令时，会从上面的级别继承配置。 默认情况下，只有两个请求头会被重新定义：

当匹配到/customer/straightcustomer/download时，使用crmtest处理，到upstream就匹配到crmtest.aty.sohuno.com，这里直接转换成IP进行转发了。假如crmtest.aty.sohuno.com是在另一台nginx下配置的，ip为10.22.10.116，则$proxy_host则对应为10.22.10.116。此时相当于设置了Host为10.22.10.116。如果想让Host是crmtest.aty.sohuno.com，则进行如下设置：

如果不想改变请求头“Host”的值，可以这样来设置：

但是，如果客户端请求头中没有携带这个头部，那么传递到后端服务器的请求也不含这个头部。 这种情况下，更好的方式是使用$host变量——它的值在请求包含“Host”请求头时为“Host”字段的值，在请求未携带“Host”请求头时为虚拟主机的主域名：

此外，服务器名可以和后端服务器的端口一起传送：

如果某个请求头的值为空，那么这个请求头将不会传送给后端服务器：

nginx配置项，里面的配置项有代理https，http，代理静态文件，H5分发，代理TCP连接，能满足大多数搭建测试环境所要用的nginx的情况，大家碰到要使用nginx的时候可以参考下

以上就是关于h5部署在Nginx相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

有没有提供代收款的平台（h5第三方收款平台）

云闪付h5支付（云闪付h5支付电费）

如何通过互动h5加深用户体验

厦门景观设计哪里有招聘（厦门景观设计哪里有招聘信息）

如何自己创造一个网站平台（如何创一个自己的网站）