Nginx
- Nginx的跨域问题解决
- 同源策略
- 跨域问题
- 跨域问题的案例演示
- 解决方案
- 静态资源防盗链
- 什么是资源盗链
- Nginx防盗链的实现原理：
Nginx的跨域问题解决
这块内容，我们主要从以下方面进行解决：
代码语言：javascript复制什么情况下会出现跨域问题?
实例演示跨域问题
具体的解决方案是什么?同源策略
浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。
同源: 协议、域名(IP)、端口相同即为同源
代码语言：javascript复制http://192.168.200.131/user/1
https://192.168.200.131/user/1
不
http://192.168.200.131/user/1
http://192.168.200.132/user/1
不
http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
不
http://www.nginx.com/user/1
http://www.nginx.org/user/1
不
http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
不
http://www.nginx.org:80/user/1
http://www.nginx.org/user/1
满足跨域问题
简单描述下:
代码语言：javascript复制有两台服务器分别为A,B,如果从服务器A的页面发送异步请求到服务器B获取数据，
如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。跨域问题的案例演示
出现跨域问题会有什么效果?,接下来通过一个需求来给大家演示下：
（1）nginx的html目录下新建一个a.html
代码语言：javascript复制<html>
<head>
<meta charset="utf-8">
<title>跨域问题演示</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.get('http://192.168.200.133:8080/getUser',function(data){
alert(JSON.stringify(data));
});
});
});
</script>
</head>
<body>
<input type="button" value="获取数据" id="btn"/>
</body>
</html>（2）在nginx.conf配置如下内容
代码语言：javascript复制server{
listen 8080;
server_name localhost;
location /getUser{
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}
}
server{
listen 80;
server_name localhost;
location /{
root html;
index index.html;
}
}(3)通过浏览器访问测试
解决方案
使用add_header指令，该指令可以用来添加一些头信息
语法 | add_header name value… |
|---|---|
默认值 | — |
位置 | http、server、location |
此处用来解决跨域问题，需要添加两个头信息，一个是Access-Control-Allow-Origin,Access-Control-Allow-Methods
Access-Control-Allow-Origin: 直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源
Access-Control-Allow-Methods:直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…,可以全部设置，也可以根据需要设置，多个用逗号分隔
具体配置方式
代码语言：javascript复制location /getUser{
#可以跨域请求，并设置跨域请求的请求方式
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}静态资源防盗链
什么是资源盗链
资源盗链指的是此内容不在自己服务器上，而是通过技术手段，绕过别人的限制将别人的内容放到自己页面上最终展示给用户。以此来盗取大网站的空间和流量。简而言之就是用别人的东西成就自己的网站
效果演示
京东:https://img14.360buyimg.com/n7/jfs/t1/101062/37/2153/254169/5dcbd410E6d10ba22/4ddbd212be225fcd.jpg
百度:https://pics7.baidu.com/feed/cf1b9d16fdfaaf516f7e2011a7cda1e8f11f7a1a.jpeg?token=551979a23a0995e5e5279b8fa1a48b34&s=BD385394D2E963072FD48543030030BB
我们自己准备一个页面，在页面上引入这两个图片查看效果
从上面的效果，可以看出来，下面的图片地址添加了防止盗链的功能，京东这边我们可以直接使用其图片。
Nginx防盗链的实现原理：
了解防盗链的原理之前，我们得先学习一个HTTP的头信息Referer,当浏览器向web服务器发送请求的时候，一般都会带上Referer,来告诉浏览器该网页是从哪个页面链接过来的。
后台服务器可以根据获取到的这个Referer信息来判断是否为自己信任的网站地址，如果是则放行继续访问，如果不是则可以返回403(服务端拒绝访问)的状态信息。
在本地模拟上述的服务器效果：
Nginx防盗链的具体实现:
valid_referers:nginx就会痛过查看referer自动和valid_referers后面的内容进行匹配，如果匹配到了就将invalid_referer变量置0，如果没有匹配到，则将invalid_referer变量置为1，匹配的过程中不区分大小写。
语法 | valid_referers none|blocked|server_names|string… |
|---|---|
默认值 | — |
位置 | server、location |
none: 如果Header中的Referer为空，允许访问
blocked:在Header中的Referer不为空，但是该值被防火墙或代理进行伪装过，如不带"http://" 、"https://"等协议头的资源允许访问。
server_names:指定具体的域名或者IP
string: 可以支持正则表达式和*的字符串。如果是正则表达式，需要以~开头表示，例如
location ~*.(png|jpg|gif){
valid_referers none blocked www.baidu.com 192.168.200.222 *.example.com example.* www.example.org ~.google.;
if ($invalid_referer){
return 403;
}
root /usr/local/nginx/html;
}遇到的问题:图片有很多，该如何批量进行防盗链？
针对目录进行防盗链
配置如下：
代码语言：javascript复制location /images {
valid_referers none blocked www.baidu.com 192.168.200.222 *.example.com example.* www.example.org ~.google.;
if ($invalid_referer){
return 403;
}
root /usr/local/nginx/html;
}这样我们可以对一个目录下的所有资源进行防盗链操作。
遇到的问题：Referer的限制比较粗，比如随意加一个Referer，上面的方式是无法进行限制的。那么这个问题改如何解决？
此处我们需要用到Nginx的第三方模块ngx_http_accesskey_module，第三方模块如何实现盗链，如果在Nginx中使用第三方模块的功能，这些我们在后面的Nginx的模块篇再进行详细的讲解。
