Nginx配置跨域及解析

一、代码

先放上nginx配置代码

    # 以代理百度地图api为例
    location /mymap/ {
        proxy_pass http://api.map.baidu.com/;
        # 配置跨域代理 
        add_header         Access-Control-Allow-Origin      $http_origin;
        add_header         Access-Control-Allow-Methods     GET,POST,OPTIONS,HEAD,PUT;
        add_header         Access-Control-Max-Age           3600;
        add_header         Access-Control-Allow-Credentials true;
        add_header         Access-Control-Allow-Headers     User-Agent,Origin,Content-Type,Accept,Authorization,X-Token;
        if ($request_method = OPTIONS){
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers User-Agent,Origin,Content-Type,Accept,Authorization,X-Token;
            add_header Access-Control-Max-Age 3600;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 200;
        }
    }

二、配置解释

1、Nginx指令add_header和proxy_set_header的区别

如何理解反向代理？
Nginx是反向代理服务器，我们可以从下面的图来理解为什么是反向代理。以Nginx为中心，数据的流向是从Server到Nginx再到Client，注意我说的是数据（响应数据），而不是请求。我们都知道水流一定是从上游流到下游，所以给Server一个别称上游服务器，当然这个别称并不是我定义的。

proxy_set_header和add_header的区别

区别：proxy_set_header是Nginx设置请求头信息给上游服务器，add_header是Nginx设置响应头信息给浏览器。

• proxy_set_header

  假如Nginx请求上游服务器时，添加额外的请求头，就需要使用proxy_set_header。在Java中使用HttpServletRequest#getHeader(String name)来获取请求头的值，name是请求头的名称。
  例如：proxy_set_header X-Request-URI $scheme://$host/$uri;

  String requestUrl = request.getHeader("X-Request-URI");
  if (requestUrl == null) {
      // 从Servlet服务器获取客户端请求地址
      requestUrl = request.getRequestURL().toString();
  }
  

• add_header
Nginx响应数据时，要告诉浏览器一些头信息，就要使用add_header。例如跨域访问（详细参见Nginx跨域访问配置）

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
  add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'
  # 由于跨域请求，浏览器会先发送一个OPTIONS的预检请求，我们可以缓存第一次的预检请求的失效时间
  if ($request_method = 'OPTIONS') {
  	add_header 'Access-Control-Max-Age' 2592000;
  	add_header 'Content-Type' 'text/plain; charset=utf-8';
  	add_header 'Content-Length' 0;
  	return 204;
  }
  

 放上此段原文链接：Nginx指令add_header和proxy_set_header的区别_p7+的博客-CSDN博客

CORS"跨域资源共享"（Cross-origin resource sharing）请求解释

下面这些参数，有些是浏览器发出的，有些是服务器端返回的，这里就一起放在这里了，详细的看原文：点这里

• Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

• 
  
   

• Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

• Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

• Access-Control-Allow-Methods：

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

• Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

• Access-Control-Allow-Headers：

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

• Access-Control-Max-Age：

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。
 

原文看这个：跨域资源共享 CORS 详解 - 阮一峰的网络日志

也可以看看这篇讲跨域的：https://segmentfault.com/a/1190000011145364