同源限制
- 不能获取和操作DOM(无法获取document对象)
- 不能操作Cookie(拿不到document更不用说document.cookie了)
- ajax请求可以发,但是无法获取响应数据
不受同源策略限制的情况
默认<link/>、<img/>、<script/>不受浏览器同源策略的限制,但是可以通过配置内容安全策略(CSP)来限制标签请求
解决跨域的方法
简单请求
- 请求方法是GET/POST/HEAD
- 请求的Content-Type是text/plain、multipart/form-data、application/x-www-form-urlencoded
- 请求头字段要符合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类型的跨域问题。