跨域访问控制
通常浏览器都会禁止页面内容进行跨域式访问；那什么是跨域访问呢？
比如在浏览器中访问网站 http://www.a.com，但是在 a 网站中有代码是通过 http://www.b.com 去访问 b 网站的内容，这样就形成了跨域访问。这看起来似乎很正常的访问为什么浏览器会禁止跨域访问呢？因为这种操作非常不安全，他会出现 CSRF（Cross Site Request Forgery） 攻击；什么是 CSRF 攻击，比如用户访问了一个购物网站 A ，输入了自己的用户名密码登陆，用户在通过验证后网站 A 会产生用户的 Cookie 信息并响应给用户浏览器，这时用户又去访问了网站 B，网站 B 中存在恶意代码在用户不知情的情况下携带用户的 Cookie 信息访问网站 A ，这样他就可以盗取用户的资料，使用用户的账号去购买商品等。所以他的危害非常大，浏览器会禁止这种访问方式。
但是有时我们又确实需要这种访问方式，比如一个企业有多个域名，我们需要他们之间能够获取对方的资源时就需要浏览器允许他跨域访问，但我们不可能去操作浏览器；这时就需要在响应头中添加 Access-Control-Allow-Origin 头部信息了，他可以值可以设置允许哪些域名可以来访问自己的网站，当浏览器读取到响应头部中存在 Access-Control-Allow-Origin 信息是就会允许跨域访问，如果没有就禁止。还可以使用 Access-Control-Allow-Methods 来控制运去请求的方法，如 GET, POST, PUT, DELETE, OPTIONS；
在 Nginx 中我们需要使用 http_headers_module 模块中的 add_header 指令来添加该头部信息。
add_header 指令配置语法
Syntax: add_header name value [always];
Default: —
Context: http, server, location, if in location
name 对应头部名称；
value 对应头部的值；
他可以在 http, server, location, if in location 上下文中配置。
示例
在网站 www.a.com 上访问 www.b.com 上的一张图片
主机 a 配置
server {
listen 80;
server_name www.a.com;
root /opt/web_a/;
index index.html index.htm;
在主机 a 的 index 主页中插入一段 js 脚本用于请求 www.b.com 站点上的一张图片。
<html>
<body>
<h1>www.a.com</h1>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.b.com/images/eg_tulip.jpg')
xhr.send();
</script>
</body>
</html>
主机 b 配置
server {
listen 80;
server_name www.b.com;
root /opt/web_b/;
index index.html index.htm;
在没有添加头部信息的情况下访问
在浏览器的控制台提示我们资源无法加载，因为请求的资源上没有 Access-Control-Allow-Origin 头部，所以被拒绝访问了。
现在在 www.b.com 的配置文件中加上 Access-Control-Allow-Origin 头部，允许 www.a.com 来获取图片资源。
server {
listen 80;
server_name www.b.com;
root /opt/web_b/;
index index.html index.htm;
location ~ .*\.(jpg|jpeg|gif|png|ico)$ {
add_header Access-Control-Allow-Origin http://www.a.com;
}
再次访问控制台就不会出现错误信息了
在这个图片的响应头部也能看到所添加的头部信息了
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于