nginx(七十四)nginx与跨域细节探究

一   nginx配置跨域

①  知识铺垫

强调：跨域是'浏览器'行为,'不是'服务器行为

++++++++++++++  "跨域的两种解决手段"  ++++++++++++++

1)  利用nginx的'反向代理'解决跨域

  eg: A站点中嵌入'B'站点的资源,但是'B站点'的资源表现为'A站点不同的api'进行转发

  a.wzj.com/index.html --> 嵌入 <img src='a.wzj.com/video/java.mp4'> "同源"

  server_name a.wzj.com

  location /video {
       proxy_paas http://b.wzj.com
  }

2)  前后端'分离'的项目,利用'CORS'解决跨域  --> "常见"

 eg: A站点中嵌入'B'站点的资源,B站点的'资源'明确是B域名的

 a.wzj.com/index.html --> 嵌入 <img src='b.wzj.com/video/java.mp4'>

浏览器的同源策略

合法跨域访问CORS的原理

nginx中与Cookie相关的细节探讨

官方CORS解读

②  nginx配置跨域

server {
    listen       80;
    server_name  www.wzj.com;
    location  / {
      if ($request_method = 'OPTIONS') {
          # Access-Control-Allow-Origin 用于设置允许跨域请求源地址
          # 补充： 预检请求和正式请求在跨域时候'都会验证'
          # 添加'always'参数后,其他的状态码下也有CORS字段了
          add_header Access-Control-Allow-Origin 'http://java.wzj.com' always;
          #为什么写在if里面？因为这里只有预检请求才会检查
          add_header Access-Control-Allow-Headers '*'; 
          add_header Access-Control-Allow-Methods '*';
          add_header Access-Control-Allow-Credentials 'true';
          # 请求为OPTION预检请求时候,给浏览器返回一个'204'状态码
          # 当响应状态码是4XX、5XX时,此时可以加一个always参数
          return 204;
      }
      # 分三类：简单请求、正式请求、非跨域请求
      if ($request_method != 'OPTIONS') {
          add_header Access-Control-Allow-Origin 'http://java.wzj.com' always;
          add_header Access-Control-Allow-Credentials 'true';
      }
      proxy_pass  http://www.wzj.com:8080;
    }
}

重点理解各种Access-Control-Allow响应头以及跨域的报错

++++++++++++++++++  "最佳实践"  ++++++++++++++++++

server {
    listen       80;
    server_name  www.wzj.com;
    location  / {
        add_header Access-Control-Allow-Origin 'http://java.wzj.com' always;
        add_header Access-Control-Allow-Headers '*';
        add_header Access-Control-Allow-Methods '*';
        add_header Access-Control-Allow-Credentials 'true';
        if ($request_method = 'OPTIONS') {
            # 继承了上面的'add_header'
            return 204;
        }
        proxy_pass  http://www.wzj.com:8080;
    }
}

③  设置带通配符子域名的Access-Control-Allow-Origin实现安全跨域资源共享

配置多个域名在map中 只有配置过的允许跨域

nginx通过if或map跨多个域名

④  Access-Control-Allow-Credentials: true 注意事项

1) 如过设置'Access-Control-Allow-Credentials: true'

2) Access-Control-Allow-Origin'必须设置'为'具体'的Origin值,而非 '*' 星号,否则'报错'

'报错'信息：

 The value of the 'Access-Control-Allow-Origin' header \
 in the response must not be the wildcard '*' \
 when the request's credentials mode is 'include'.”

CDN的Vary导致跨域不生效  Vary响应头与缓存的关系

⑤  Access-Control-Expose-Headers注意事项

⑥  跨域200报错

1) 如果Origin指定的源,'不在'许可范围内,服务器会返回一个'正常'的HTTP回应;

2) 浏览器发现,这个回应的头信息'没有包含'Access-Control-Allow-Origin字段;

3) 就知道出错了,从而'抛出一个错误',被XMLHttpRequest的onerror回调函数捕获;

注意: 这种错误'无法通过状态码'识别,因为HTTP回应的状态码有可能是'200'