跨域的原因:
浏览器安全的“同源政策” 即协议相同、域名相同、端口相同
举例:A网站是一家银行,用户登录以后,又去浏览其他网站,如果其他网站可以读取A网站的cookie,cookie一般保存用户的登录状态,这样信息就会泄露
跨域造成的问题:
1.无法读取cookie、localStorage、indexDB
2.DOM无法获得
3.ajax请求无法发送
解决跨域方法
1.iframe
这里不做赘述,要提醒一点,mac的safari浏览器需要手动开启允许cookie
2.jsonp
因为js不存在跨域问题,jsonp的原理就是返回一个callback的回调函数,这个回调函数在script中加载获取相应的返回信息
3.cors
后端配置:
Access-Control-Allow-Origin:'*',
Access-Control-Allow-Headers:'Content-Type',
Access-Control-Request-Method:'POST,GET'
前端设置:withcredentail,带上cookie
cors跨域原理:
浏览器的http的header,服务器配置header、methods、origin信息,浏览器端请求报文中发送
origin信息实现请求,如果想要带上cookie,可配置withcredientals,但是这里要注意,如果后端origin请求
如果是*,不可使用cookie,如果需要可在请求头添加token,但此时,浏览器会先发送一次预请求option,后端
配置可添加配置max-age实现在多长时间内不用重复发送预请求
4.postMessage
HTML5的API,这里不做赘述
5.nginx反向代理
Nginx的反向代理应用于服务器端,通过proxy_pass以及add_header来处理请求转发、负载均衡等
6.proxy
proxy代理应用于客户端,通过devServer. proxy中的属性target(api的域名),对应的修改axios中baseurl即可