跨域: 浏览器通常用于在同一个域下发起 HTTP 请求,但出于安全考虑,现代浏览器实施了同源策略(Same-origin policy),限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。
同源策略:是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。同源就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。如果尝试不同源(不同的域、协议或端口)中请求资源,会遇到跨域问题。
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
当前页面url
被请求页面url
是否跨域
原因
http://www.test.com/
http://www.test.com/index.html
否
同源(协议、域名、端口号相同)
http://www.test.com/
https://www.test.com/index.html
跨域
协议不同(http/https)
http://www.test.com/
http://www.baidu.com/
跨域
主域名不同(test/baidu)
http://www.test.com/
http://blog.test.com/
跨域
子域名不同(www/blog)
http://www.test.com:8080/
http://www.test.com:7001/
跨域
端口号不同(8080/7001)
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
【1】JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
【2】跨域资源共享(CORS)
CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
a.普通跨域请求:只需服务器端设置Access-Control-Allow-Origin,响应头中添加合适的 CORS 策略,允许特定的外部域访问资源。
b.带cookie跨域请求:前后端都需要进行设置
【服务端设置】
编写filter在response对象中添加响应头,告诉浏览器允许跨域访问,* 号代码允许所有的请求域名,所有的请求方法跨域访问
【前端设置】根据xhr.withCredentials字段判断是否带有cookie
【3】代理服务器(ngnix等)
在服务器端设置一个代理,所有前端请求首先发送到代理服务器,由代理服务器转发请求到目标服务器,然后再将响应返回给前端。
a. 通过nginx代理配置可以解决跨域
参考:什么是跨域?跨域解决方法
前端解决跨域的九种方法
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/72424.html