014.Nginx跨域配置

一 跨域概述

1.1 同源策略

同源策略是一个安全策略。同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源。

同源策略主要是基于如下可能的安全隐患:

  1. 用户访问www.mybank.com,登录并进行网银操作,这时cookie等资源都生成并存放在浏览器;
  2. 用户突然访问一个另一个网站;
  3. 该网站在页面中,拿到银行的cookie,比如用户名,登录token等,然后发起对www.mybank.com的操作;
  4. 若此时浏览器不对跨域做限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。

1.2 跨域简介

CORS是一个W3C标准,全称是跨域资源共享(Cross-origin resource sharing)。即从一个域名的网页去请求另一个域名的资源。本质上对于此类请求,只要协议、域名、端口有任何一个的不同,就被当作是跨域,即都被当成不同源。

通常基于安全考虑,Nginx启用了同源策略,即限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

但若同一个公司内部存在多个不同的子域,子域之间需要互访,此时可通过跨域进行实现。跨域可通过JSONP和CORS进行实现。

注意:

  1. 如果是协议和端口造成的跨域问题"前端"是无法解决的;
  2. 在跨域实现上,仅仅是通过"URL的首部"来识别而不会根据域名对应的IP地址是否相同来判断。"URL的首部"可以理解为""协议,域名和端口必须匹配";
  3. 请求跨域并不是请求发不出去,请求可正常发出,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

提示:

本实验基于Nginx的CORS实现跨域,更多JSONP等参考:https://juejin.im/post/5e6c58b06fb9a07ce01a4199。

1.3 跨域处理流程

clipboard

  1. 首先查看http头部有无origin字段;
  2. 如果没有,或者不允许,直接当成普通请求处理,结束;
  3. 如果有并且是允许的,那么再看是否是preflight(method=OPTIONS);
  4. 如果是preflight,就返回Allow-Headers、Allow-Methods等,内容为空;
  5. 如果不是preflight,就返回Allow-Origin、Allow-Credentials等,并返回正常内容。
  1 location /pub/(.+) {
  2     if ($http_origin ~ <允许的域(正则匹配)>) {
  3         add_header 'Access-Control-Allow-Origin' "$http_origin";
  4         add_header 'Access-Control-Allow-Creden