HTTP1.1(十四)如何合法的跨域访问

一  如何合法的跨域访问

1) Ajax请求

2) 同源策略是'禁止'跨域访问

3) 而CORS'允许跨域'访问

①  CORS

1）跨域访问有'很多'解决方案,但是这些方案大部分是'浏览器的实现bug'

2）RFC规范中'推荐'使用CORS,是能够保证'安全性'的

②  简单请求的跨域

案例： 站点'B'访问站点'A'的资源

备注： Origin请求头一般'非必须'

简单请求涉及： 'Origin'请求头和'Access-Control-Allow-Origin'响应头

+++++++++ "这样的请求都是复杂请求" +++++++++ 

Content-Type: application/json;charset=UTF-8

application/xml;charset=UTF-8 

++++++++++++ "Ajax跨域简单请求案例" ++++++++++++

说明： '没有'设置Access-Control-Allow-Origin响应头导致'请求被拒'

说明：响应报文通过'wiresahrk'可以观察'已拿到',但是由于'简单请求'的CORS不满足,浏览器不展示

1) '上面'是请求'跨域',但是没有设置'Access-Control-Allow-Origin'响应头导致报错

2) '下面'是请求'跨域',设置'Access-Control-Allow-Origin'响应头所允许'域名'不在当前范围

  备注： 允许'https'访问,但是实际是'http'访问,不匹配

③  复杂请求跨域请求

1) 复杂请求的'两步'

  [1]、预检请求 --> 也是一个'协商'的过程,是否'协商一致'

    1. 服务器收到"预检"请求以后,检查下列'请求头'

    2. Origin、Access-Control-Request-Method和Access-Control-Request-Headers

    3. 确认'允许跨源'请求,就可以'做出回应'

  [2]、协商一致,就可以发送'正式'请求

2) 跨域访问资源涉及的'请求头'

3) 跨域访问资源涉及的'响应头'  --> Access-Control-Allow-*

备注： Access-Control-Max-Age 表示'preflight请求'缓存的最长时间

Access-Control-Allow-Origin：*
Access-Control-Allow-Credentials：true
Access-Control-Allow-Headers：Content-Type,X-Requested-With
Access-Control-Allow-Methods：GET, POST, PATCH, PUT, DELETE, OPTIONS

10 种CORS跨域解决方案  八种方式实现跨域请求

④  答疑解惑

说明： cros配置不当,也会'导致csrf'