同源与跨域

同源限制

  1. 不能获取和操作DOM(无法获取document对象)
  2. 不能操作Cookie(拿不到document更不用说document.cookie了)
  3. ajax请求可以发,但是无法获取响应数据

不受同源策略限制的情况

默认<link/>、<img/>、<script/>不受浏览器同源策略的限制,但是可以通过配置内容安全策略(CSP)来限制标签请求

解决跨域的方法

简单请求

  1. 请求方法是GET/POST/HEAD
  2. 请求的Content-Type是text/plain、multipart/form-data、application/x-www-form-urlencoded
  3. 请求头字段要符合CORS限制的请求头(默认的请求头是符合的)

CROS解决简单请求

设置请求头Access-Control-Allow-Origin为请求的Origin值

CROS解决复杂请求

浏览器会额外发送一个OPTIONS预检请求,通过才会发送跨域请求,预检请求默认会带有Origin/Access-Control-Request-Method/Access-Control-Request-Headers三种请求头。

服务器必须以带有带有Access-Control-Request-Allow-Origin/Access-Control-Request-Methods/Access-Control-Request-Headers及一个可选的Access-Control-Max-Age(缓存时间,在缓存周期里不会再走预检)请求头来响应预检请求。

之后的跨域请求设置请求头Access-Control-Allow-Origin为请求的Origin值。

JSONP

利用浏览器对script标签不存在跨域限制,来返回js函数调用,通过参数来传值,缺点是只能解决Get类型的跨域问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容