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

nginx 专栏收录该内容
2 篇文章 0 订阅

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;
  • 8
    点赞
  • 2
    评论
  • 25
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

zeng092210

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值