跨域踩过的坑

先说一下我具体遇到的问题，公司让设计一个接口，前端访问接口通过后台配置域名来限制接口是否有权限，如果没有权限，直接产生跨域，花了整整一天时间，最后发现功能实现不了，最后只能换其他思路去实现了。

首先彻底理解跨域：

浏览器安全的基石是"同源政策"（same-origin policy，同协议，同域名，同端口），浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略，从一个域上加载的脚本不允许访问另外一个域的文档属性，这样就产生了跨域。

跨域解决的办法有好几种（通过nginx转发，jsonp，cros）,下面主要说CROS

CORS  "跨域资源共享"（Cross-origin resource sharing）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 

使用CORS的方式非常简单，但是需要同时对前端和服务器端做相应处理。

1、  前端

客户端使用XmlHttpRequest发起Ajax请求，当前绝大部分浏览器已经支持CORS方式，且主流浏览器均提供了对跨域资源共享的支持。

2、服务端

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

response.setHeader("Access-Control-Max-Age", "1800");

Access-Control-Allow-Origin:*表示允许任何域发起请求，如果只允许特定的域访问，则设置Access-Control-Allow-Origin:xxx为具体域名即可。

Access-Control-Allow-Headers：标识允许的请求头参数

Access-Control-Allow-Methods：标识允许的请求方式

Access-Control-Max-Age：这个响应首部表示 preflight request  （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久。

我当时想法是拦截所有请求，然后去查询是否具有权限，如果有权限，放开继续走后面的业务，如果没有权限，直接让其产生跨域，其实我的这种想法是错误的，我们回到同源策略的概念上，跨域是浏览器为了安全而导致的，因为浏览器在发送请求时，会发送option请求对服务器进行预检，会直接产生跨域，所以我上面这种想法就实现不了，后来我第一步处理了跨域，然后接下来对服务器ip,域名做限制，然后手动进行提示接口是否有权限。

Preflighted Requests(预检请求)

Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。

下面的2种情况需要进行预检：

1、  简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求；

2、中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等。

 

https://www.cnblogs.com/zhangkaikai/p/8383905.html

https://www.cnblogs.com/virtual/p/3720750.html