一、代码

先放上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里面指定。