什么是同源策略
同源策略是指“协议+域名+端口”三者相同,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,浏览器很容易受到XSS、CSRF等攻击.
什么是跨域
访问不同源的资源就叫做跨域
同源策略限制内容有:
- Cookie、LocalStorage、IndexedDB等存储性内容
- DOM节点
但下面标签是允许跨域加载资源: - <img src="xxx" />
- <link href="xxx">
- <script src="xxx">
- <iframe src="xxx">
- <video><source src="xxx"></video>
- <audio><source src="xxx"></audio>
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了.你可能会疑问明明通过表单的方式可以发起跨域请求,为什么AJAX就不能?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,AJAX可以获取响应,浏览器认为这不安全,所以响应了拦截.但是表单并不会获取新的内容,所以可以发起跨域请求.同时也说明了跨域并不能完全阻止CSRF,因为请求毕竟是发出去了.
跨域的解决方案
CORS跨域
CORS(跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否拦截前端JS代码获取跨域请求的响应,JS设置跨域之后发送请求,一旦浏览器发现AJAX请求跨域,就会自动添加一些头信息,有时还会多出一次预检请求.
CORS跨域流程图
预检请求流程图
image.png
案例
WechatIMG36.jpeg
这个图片表示源http://localhost:8080请求http://dealer-test.hikvision.com/hikvisionmall/common/dbNow这个文件的时候发生跨域,因为这两个源不同
WechatIMG37.png
这个图片表示http://hikui-test.hikvision.com请求http://gear-tst.hikvision.com/gateway/hik-cas的时候跨域,因为我在项目中请求后者的时候没有在axios中设置withCredentials导致请求跨域不成功,并且这时候接口报401页面跳转到http://ssouat.hikvision.com所以才会出现这种重定向报错
参考文章:https://cloud.tencent.com/developer/article/1467263
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://blog.csdn.net/qq_37896194/article/details/102834574
https://github.com/ljianshu/Blog/issues/55
网友评论