零基础从头教学Linux（Day 43）

Nginx实现跨域与防盗链配置指南

四、 Nginx配置跨域 CORS

4.1 跨域的定义

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

4.2 同源的定义

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

与 URL http://store.company.com/dir/page.html 的源进行对比的示例：

http://store.company.com/dir2/other.html 同源
https://store.company.com/secure.html 不同源，协议不同
http://store.company.com:81/dir/etc.html 不同源，端口不同
http://news.company.com/dir/other.html 不同源，主机不同

4.3 不同源的限制

Web 数据层面，同源策略限制了不同源的站点读取当前站点的 Cookie 、 IndexDB 、 LocalStorage 等数据；
DOM 层面，同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作；
网络层面，同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。

4.4 Nginx 解决跨域的原理

浏览器的同源策略限制了跨域请求，但当使用 Nginx 作为代理服务器时，浏览器发送的请求实际上是发送到与前端页面同源的 Nginx 服务器。然后 Nginx 将请求转发到真正的目标服务器，目标服务器返回的响应再通过 Nginx 返回给浏览器。从浏览器的角度看，它只与同源的 Nginx 服务器进行交互，从而绕过了 CORS 限制

4.5 案例

前端 server 的域名为：fe.server.com

后端服务的域名为：dev.server.com

现在在 fe.server.com 对 dev.server.com 发起请求一定会出现跨域。

现在我们只需要启动一个 Nginx 服务器，将 server_name 设置为 fe.server.com 然后设置相应的 location 以拦截前端需要跨域的请求，最后将请求代理回 dev.server.com 。

如下面的配置：

1server {
2  listen        80;
3  server_name  fe.server.com;
4  location / {
5        proxy_pass dev.server.com;
6        proxy_set_cookie_domain target-domain.com your-domain.com;
7        proxy_set_header Host target-domain.com;
8        proxy_set_header X-Real-IP $remote_addr;
9        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
10        # 可选的配置，用于处理响应头
11        proxy_set_header Access-Control - Allow - Origin http://fe.server.com;
12        proxy_set_header Access-Control - Allow - Methods GET,POST,PUT,DELETE;
13        proxy_set_header Access-Control - Allow - Headers Content - Type,Authorization;
14  }
15}

配置解析：

proxy_set_header
- Host backend - domain.com：设置转发请求的Host头信息。这是因为后端服务器可能会根据Host头来区分不同的虚拟主机或服务，所以需要将正确的Host信息传递给后端服务器，使其能够正确处理请求。
- X-Real-IP $remote_addr和X-Forwarded-For $proxy_add_x_forwarded_for：这两个指令用于传递客户端的真实 IP 地址。$remote_addr是 Nginx 记录的客户端 IP 地址，$proxy_add_x_forwarded_for是一个包含了客户端 IP 以及中间代理服务器 IP（如果有的话）的变量。这样后端服务器可以获取到正确的客户端 IP 信息，用于日志记录、访问控制等目的。
- Origin http://frontend - domain.com：这是关键的一个设置，用于在转发请求时，将Origin头信息设置为前端页面的域名。后端服务器在收到这个请求时，会认为请求来自于同源的http://frontend - domain.com，从而避免了 CORS 限制。这样后端服务器就可以正常处理请求并返回响应，响应会通过 Nginx 再返回给浏览器。
- proxy_set_header Access-Control - Allow - Origin
  这个指令用于在 Nginx 作为代理服务器返回响应时，设置Access - Control - Allow - Origin响应头。通过将其设置为前端页面的域名（http://frontend - domain.com），浏览器会认为这个响应是来自同源的服务器，从而允许前端 JavaScript 代码访问这个响应，有效地绕过了 CORS 限制。
- proxy_set_header Access-Control - Allow - Methods
  用于设置Access - Control - Allow - Methods响应头，指定允许的 HTTP 请求方法。在这里列举了GET、POST、PUT和DELETE，表示后端服务器允许前端通过这些方法进行跨域请求。可以根据实际的后端 API 支持的方法进行调整。
- proxy_set_header Access-Control - Allow - Headers
  设置Access - Control - Allow - Headers响应头，指定允许的请求头。Content - Type头通常用于指定请求或响应的内容类型，如application/json或text/plain等；Authorization头用于传递认证信息，如令牌或用户名 / 密码等。这确保了前端在跨域请求中可以发送这些必要的请求头，并且后端会认可这些请求头。

这样可以完美绕过浏览器的同源策略：fe.server.com 访问 Nginx 的 fe.server.com 属于同源访问，而 Nginx 对服务端转发的请求不会触发浏览器的同源策略。

五、Nginx防盗链设置

5.1 什么是盗链

在实际生产过程中，我们线上的图片等静态资源，经常会被其他网站盗用，他们发大财的同时，成本确实我们在买单，下面来说下，如何杜绝这种行为。
应该说只要是静态资源都是可以防盗链的，只需要在Server字段加上几行代码即可。众所周知网站出名了后，会有各种刁民来找茬的，最常见的就是爬你网站的东西。
关于防盗链这里不得不提一下网页的加载顺序是先加载HTML相关的内容，然后解析HTML的内容，那些需要加载图片，那些需要加载文件，是逐步加载的，所以可以在加载静态资源的时候做防盗链的操作，例如：在加载图片的时候直接跳转去其他链接，或者直接返回404,403等错误代码，拒绝它的请求。

如何区分哪些是不正常的用户？

HTTP Referer是Header的一部分，当浏览器向Web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器借此可以获得一些信息用于处理，例如防止未经允许的网站盗链图片、文件等。因此HTTP Referer头信息是可以通过程序来伪装生成的，所以通过Referer信息防盗链并非100%可靠，但是，它能够限制大部分的盗链情况.
比如在<www.google.com> 里有一个 <www.baidu.com> 链接，那么点击这个<www.baidu.com> ，它的header 信息里就有：Referer=http://www.google.com

5.2 Referer解析

HTTP 协议中有一个用来表示“页面或资源”来源的“请求头”，这个请求头叫做 Referer --> Referer是表示请求是从哪个网址发出的防盗链功能基于HTTP协议支持的 Referer 机制，通过Referer跟踪来源，对来源进行识别和判断

5.3 配置防盗链案例

为了模拟盗链，让192.168.166.9为网站服务站点，192.168.166.10访问192.168.166.9进行盗链。

修改Nginx的字符集以支持中文：

1charset utf-8;

修改 192.168.166.10 Nginx 默认访问文件：

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>产生盗链</title>
7</head>
8<body>
9 <a href='http://192.168.166.9/photos/1.png'>站点</a>
10</body>
11</html>

此时在浏览器输入192.168.166.10，可以正常访问192.168.166.9站点的图片资源。

如果不想被盗链，则对192.168.166.9站点服务修改Nginx配置文件，防盗链的配置可以在任意的 location 模块下设置，不能在 server 下，不想让别人盗链哪个资源就在那个资源的 location 模块下设置防盗链。

防盗链设置格式：

1valid_referers none | blocked | server_names | strings ....;

--none：允许没有http_refer的请求访问资源，检测 Referer 头域不存在的情况，则可以访问。
--blocked：检测 Referer 头域的值被防火墙或者代理服务器删除或伪装的情况。这种情况该头域的值不以 “http://” 或 “https://” 开头。允许不是http://开头的，不带协议的请求访问资源。
--server_names ：只允许指定ip/域名来的请求访问资源（白名单）。可设置一个或多个 URL ，检测 Referer 头域的值是否是这些 URL 中的某一个。在生产环境中尽量使用域名，不使用ip。

举例

1valid_referers 192.168.44.101;
2if ($invalid_referer) {
3return 403;
4}

192.168.166.9设置防盗链

1server {
2    listen 80;
3    server_name localhost;
4    location / {
5            root   /usr/local/nginx1273/html;
6            index  index.html index.htm;
7        }
8 
9    location ~* \.(js|img|css|png)${
10        valid_referers 192.168.166.9; #只允许192.168.166.9访问静态资源，其他人访问则会返回403
11        if ($invalid_referer){
12            return 403;
13        }
14        root html;
15        index index.html index.htm;
16    }
17    error_page 500 502 503 504 /50x.html;
18    location =/50x.html {
19    root html;
20    }
21}

5.4 测试

浏览器测试

用192.168.166.10去访问，css等静态资源返回403，获取不到数据。

点击”站点“，跳转到192.168.166.9站点资源是显示：

《零基础从头教学Linux（Day 43）》是转载文章，点击查看原文。