window系统Nginx的使用经历和访问本地文件跨域问题

Mac版：Mac 使用和安装nginx

本人是在jquery项目中使用Nginx

第一步：下载nginx、搭建、配置

下载nginx: http://nginx.org/en/download.html

解压到（D:\myProject\）下；将下载下来解压的文件夹命名为nginx，为后面方便；
接下来需要用到"Windows Service Wrapper"小工具；
下载地址：http://repo.jenkins-ci.org/releases/com/sun/winsw/winsw/1.18/winsw-1.18-bin.exe
将下载的文件放到nginx目录下和nginx.exe平级
将下载小工具名称修改为nginx-service.exe。并同级目录创建配置文件nginx-service.xml、nginx-service.exe.config。
nginx-service.xml内容： 注意路径

<service>
  <id>nginx</id> 
  <name>Nginx Service</name>
  <description>High Performance Nginx Service</description>
  <logpath>D:\myProject\nginx\logs</logpath>
  <log mode="roll-by-size">
    <sizeThreshold>10240</sizeThreshold>
    <keepFiles>8</keepFiles>
  </log>
  <executable>D:\myProject\nginx\nginx.exe</executable>
  <startarguments>-p D:\myProject\nginx</startarguments>
  <stopexecutable>D:\myProject\nginx\nginx.exe</stopexecutable>
  <stoparguments>-p D:\myProject\nginx -s stop</stoparguments>
</service>

nginx-service.exe.config内容：

<configuration>
  <startup>
    <supportedRuntime version="v2.0.50727" />
    <supportedRuntime version="v4.0" />
  </startup>
  <runtime>
    <generatePublisherEvidence enabled="false"/> 
  </runtime>
</configuration>

到现在nginx目录下结构：

接下来到命令窗口（cmd）:

安装nginx输入: nginx-service.exe install

如果报错： service with id ‘nginx’ already exists 表示以前有残留
输入: sc delete nginx (删除nginx服务) 显示：deleteService 成功 就ok了

下面就是启动nginx,有两种方法

1.命令操作

2.服务窗口操作

手动启动服务，启动ok最好，不然就像我会遇到很多问题（如80端口被别的服务占据情况）
出现无法启动或本地启动错误之类的话，首先去看nginx日志也可以查看window事件日志，就我个人建议别瞎琢磨先别着急网上百度，只会浪费时间还不一定能解决，先看日志
1. window事件日志

具体原因和解决办法可以网上查一下解决。
2. nginx日志如下（推荐）：
nginx安装目录 => logs => nginx-service.err.log

nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
// 看到这个就是表示80端口被占了 ,需要关闭占据80端口的服务
// 出现其他一些错误，就好解决了

关闭80端口的服务
1. 输入netstat -aon | findstr :80 查看80端口服务pid，根据pid值找到服务

2. 对，就是这个4；再输入tasklist | findster “4” 可以看到是system服务占据

然后去服务窗口，关闭该服务，再启动nginx 就可以了，

当然如果关闭被占端口麻烦也可以用一个没有被占的端口（比如用10010），到nginx => conf => nginx.conf下配置

在nginx.conf中修改：

server {
     listen  10010;   //  就是改这个
     server_name  localhost;
}

在nginx.conf中改动内容都要重启nginx

接下来就是配置项目地址location
location有自己的配置规则，

我的配置是：

		location ~.*\.(jpg|jepg|gif|css|png|ico|html|json|js)?$ {  
			// 简单直白理解就是: D:/myProject/H5/  == localhost:10010  localhost:10010相当于指定域名一样
			// 如果原先路径是浏览器中：D:/myProject/H5/aitestgo_web/faceDetection.html
			// 通过nginx访问就是： http://localhost:10010/aitestgo_web/faceDetection.html
			// ~.*\.(jpg|jepg|gif|css|png|ico|html|json|js)?$ 的意思就是加载D:/myProject/H5/之后子级（一级二级三级都可）文件，以.jpg .jepg .gif .css .png .ico .html .json .js结尾的文件都可正常加载，否则会出现静态资源加载错误的问题（比如background-image:url加载错误、js文件加载错误等...）
			root D:/myProject/H5/;   
		}

// 简单直白理解就是: D:/myProject/H5/ == localhost:10010 localhost:10010相当于指定域名一样
// 如果原先路径是浏览器中：D:/myProject/H5/aitestgo_web/faceDetection.html
// 通过nginx访问就是： http://localhost:10010/aitestgo_web/faceDetection.html
// ~.*.(jpg|jepg|gif|css|png|ico|html|json|js)?$ 的意思就是加载D:/myProject/H5/之后子级（一级二级三级都可）文件，以.jpg .jepg .gif .css .png .ico .html .json .js结尾的文件都可正常加载，否则会出现静态资源加载错误的问题（比如background-image:url加载错误、js文件加载错误等…）
本人就是这样简单理解的，当然还是看大牛的文章更稳，在这儿贴两篇：
nginx nginx.conf介绍：https://blog.csdn.net/weixin_42749765/article/details/82253558
nginx location配置及解释：https://blog.csdn.net/qq_33862644/article/details/79337348

nginx 能解决html文件访问本地json文件或本地文件谷歌浏览器跨域问题。
可解决接口跨域问题：nginx-cong配置 => http下配置：

#support cross domain access
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;