配置 Nginx 解决跨域

目前后端都是在自己「服务」中，通过拦截「OPTIONS」请求，返回跨域信息。这种方式有几点局限：

新建一个服务，需要把之前项目中写的拦截器copy过来，并做简单的配置。虽然不复杂，但繁琐。
对「OPTIONS」请求，增加或修改某些字段，需要「变更所有涉及到跨域的服务」并且「发布上线」。
每次请求「OPTIONS」，都需要经过「服务」，简单返回「204」和「一些协议头」并没有任何复杂逻辑，反而占用一个多余请求，对「后端服务」是一种浪费。

而使用 Nginx 处理，是在合适不过了。统一在 Nginx 前面拦截，后面所有的「服务」都能支持跨域，并且响应会很快，不浪费后端「服务」请求。

下面两种方式，从根本上是一样的，只是受限于配置方式，所以写了两种。

方法一：Ocean 配置

在 Ocean 中配置如下代码，只能通过UI操作，写在一行，很不好用。

1if ($request_method = 'OPTIONS') {
2	add_header Access-Control-Max-Age 600;add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';add_header Access-Control-Allow-Headers $http_access_control_request_headers;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Origin $http_origin;return 204;
3}

方法二：直接修改Nginx 配置文件

1set $cors '';
2# 在这里可以配置允许跨域的白名单
3if ($http_origin ~* (https?://(.+\\.)?(domain1|domain2|domain3)\\.(?:me|co|com)$) ) {
4	set $cors 'true';
5}
6
7if ($request_method = 'OPTIONS') {
8  # 这些信息一定放到 OPTIONS 中，不能为了省事，所有请求都加，这信息只对 OPTIONS 有效
9  if ($cors = 'true') {
10		add_header Access-Control-Allow-Origin $http_origin;
11	}
12  add_header Access-Control-Allow-Credentials true;
13  add_header Access-Control-Allow-Headers $http_access_control_request_headers;
14  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
15  add_header Access-Control-Max-Age 600;
16  add_header Vary 'Origin';
17  return 204;
18}

参考：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains