什么是跨域

跨域就是在一个域的文档或者脚本试图去请求另一个域的资源。我们通常说的跨域是由浏览器的同源策略限制的一类请求场景。

ps: 想对跨域知识有更多了解的可以进这里：对前端跨域方案的认知总结

为什么在nginx层解决

比如我们有如下的一个架构配置：

API 1～3 分别对应3个服务，然后如果我们的跨域配置在了3个服务上，第一个问题是不是相同的代码要重复写3次。再者就是如果再增加服务，或者其中一个服务改到了其他Nginx网关，这个时候有很大的可能还要去修改对应的跨域配置。所以放在nginx层解决，我们只需要调整代理的规则即可，服务器怎样调动都不需要去关心。

跨域的nginx配置

• 最简单的解决办法

  location / {
  # 在现代浏览器中不是那么好用，尤其是非localhost的情况下。
  add_header Access-Control-Allow-Origin *;
  }

• 通过添加header头 ```nginx

  主域名属于kaikeba.com的时候，设置allow_url变量

  if ($http_origin ~ (.*).kaikeba.com) { set $allow_url $http_origin; }

  检查请求类型

  if ($request_method !~* POST|GET|DELETE|PUT|OPTIONS) { return 403 }

Access-Control-Allow-Credentials为true的情况下，Access-Control-Allow-Origin必须是请求的域名才被允许跨域访问。

add_header Access-Control-Allow-Origin $allow_url; add_header Access-Control-Allow-Credentials true;

允许的请求头和请求方法

add_header Access-Control-Allow-Headers ‘Origin, Content-Type, Accept, Cookie, Set-Cookie, X-Requested-With, authorization’; add_header Access-Control-Allow-Methods ‘POST, GET, DELETE, PUT, OPTIONS’;

关于预检请求，直接返回200

if ($request_method = OPTIONS) { add_header Access-Control-Max-Age 3600; add_header Content-Length 0; add_header Content-Type ‘text/javascript, charset=utf-8’; return 200; } ```

• 通过在对应的服务用nginx进行反向代理接口，并修改cookie中的domain信息，方便当前域的cookie写入，实现跨域登录。

  ps: 有兴趣的童鞋可以自己试一下，一般我们只需要关心第一种或者第二种就可以了。