Nginx(发音同engine x)是一个 Web服务器,也可以用作反向代理,负载平衡器和 HTTP缓存。
直接点击 Nginx
目录下的 Nginx.exe
或
start Nginx
Nginx -s stop
或
Nginx -s quit
stop
表示立即停止 Nginx
,不保存相关信息
quit
表示正常退出 Nginx
,并保存相关信息
Nginx -s reload
tskill Nginx
proxy_pass
后面跟着一个 URL,用来将请求反向代理到 URL 参数指定的服务器上
通过在配置文件中增加 proxy_pass
你的服务器ip
例如这里的扇贝服务器地址,就可以完成反向代理。
server {
listen 80;
server_name localhost;
## 用户访问 localhost,则反向代理到https://api.shanbay.com
location / {
root html;
index index.html index.htm;
proxy_pass https://api.shanbay.com;
}
}
配置html以文件方式打开,一般的情况下,我们的HTML文件时放置在Nginx服务器上面的,即通过输入 http://localhost/index.html
但是在前端进行调试的时候,我们可能是通过使用 file:///E:/nginx/html/index.html 来打开HTML
。服务器打开不是特别方便。
而我们之所以要部署在服务器上,是想要使用浏览器自带的CORS
头来解决跨域问题,如果不想把HTML放置在Nginx中,而想通过本地打开的方式来调试HTML
可以通过自己添加Access-Control-Allow-Origin
等http头,但是我们的AJAX请求一定要加上http://127.0.0.1/request
,而不能直接是 /request
,于是将nginx.conf
作如下配置:
location / {
root html;
index index.html index.htm;
# 配置html以文件方式打开
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
# 代理到8080端口
proxy_pass http://127.0.0.1:8080;
}
如果后台是restful
风格的接口,采用了 delete
和 put
方法,而上面的配置就无能为力了。
可以通过增加对非简单请求的判断来解决 DELETE
和 PUT
跨域请求。
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是 PUT
或 DELETE
,或者 Content-Type
字段的类型是 application/json
。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight
)。
服务器收到"预检"请求以后,检查了Origin
、Access-Control-Request-Method
和 Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应。
因此,为了使Nginx可以处理 delete
等非简单请求,Nginx需要作出相应的改变,更改配置如下
location / {
# 完成浏览器的"预检"请求
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
return 204;
}
# 配置html在本地打开
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
root html;
index index.html index.htm;
# 配置html在Nginx中打开
location ~* \.(html|htm)$ {
}
# 代理到8080端口
proxy_pass http://127.0.0.1:8080;
}
我们还必须把我们的 html 代码放在 Nginx 中 html 文件夹内,即使用 Nginx 当做我们的前端服务器。
有时候我们仅仅只想将 /api
下的 url
反向代理到后端,可以通过在 nginx.conf
中配置 url
重写规则如下:
location / {
root html;
index index.html index.htm;
location ^~ /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass https://api.shanbay.com/;
}
}
这样的话,我们只用处理/api
下的url
。
在配置文件中我们通过rewrite
将URL重写为真正要请求的URL,通过proxy_pass
代理到真实的服务器IP或者域名。
如果Cookie的域名部分与当前页面的域名不匹配就无法写入。所以如果请求 www.a.com
,服务器 proxy_pass
到 www.b.com
域名,然后 www.b.com
输出 domian=b.com
的 Cookie,前端的页面依然停留在 www.a.com
上,于是浏览器就无法将 Cookie 写入。
可在nginx反向代理中设置:
location / {
# 页面地址是a.com,但是要用b.com的cookie
proxy_cookie_domain b.com a.com; #注意别写错位置了 proxy_cookie_path / /;
proxy_pass http://b.com;
}
当nginx启动时出现报错 nginx: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx
是由于配置了https代理但是没有安装ssl模块导致的,只需要安装ssl模块即可。
在nginx源安装包的目录下,就是下载解压出来的安装包,注意不是安装后的包,我这里是nginx-1.22.1目录里,按顺序执行配置命令:
./configure --prefix=/usr/local/nginx
./configure --with-http_stub_status_module
./configure --with-http_ssl_module
make
这里执行make成功后不要执行 make install 命令了,不然nginx就会重新再安装。
这里我们看到nginx源安装包目录下会生成一个objs目录,把此目录下的nginx复制覆盖已安装好的nginx执行文件(执行命令进行覆盖或粘贴覆盖)
cp /usr/local/nginx-1.22.1/objs/nginx /usr/local/nginx/sbin
执行命令查看是否安装成功,出现 with-http_ssl_module
即安装成功
/usr/local/nginx/sbin/nginx -V
-----------------------------------------------------
nginx version: nginx/1.24.0
built by gcc 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)
built with OpenSSL 1.1.1 11 Sep 2018
TLS SNI support enabled
configure arguments: --with-http_ssl_module
.进入/etc/systemd/system文件夹,新增文件 nginx.service。
[Unit]
Description=nginx service
After=network.target
[Service]
User=root
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
ExecStartPre=/bin/sleep 10
[Install]
WantedBy=multi-user.target
命令行运行
systemctl enable nginx
总结:
Nginx解决跨域问题通过Nginx反向代理将对真实服务器的请求转移到本机服务器来避免浏览器的"同源策略限制"。
server {
listen 8090;
server_name 127.0.0.1;
location / {
proxy_pass https://dev.xxx.tech;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_set_header Host $host;
# proxy_set_header X- Real - IP $remote_addr;
proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;
}
}