天天看点

跨域问题浅了解跨域概念了解

跨域概念了解

跨域有了解吗? 浅学习一下!!!

产生原因:

浏览器因为安全考虑,设置了同源策略,用来防止非法攻击【即当前发起请求的域与该请求所指向的资源所在的域必须一致, 这里的域是指协议、DNS域名、端口的合集,任何一个不相同都会出现跨域问题】;

哪些是跨域请求

跨域问题浅了解跨域概念了解

尤其现在开发是前后端分离的模式,前端和后端资源在不同的服务器/不同端口上,从前端去获取后端资源可能存在跨域问题;

举例实践

比如:使用浏览器打开百度地址,当前在百度网站上域名是www.baidu.com 想要请求淘宝的网站www.taobao.com ,就是不同的域名,就可能会存在跨域资源共享问题;

跨域问题浅了解跨域概念了解

如果在百度上请求就是www.baidu.com 域名下面的其他资源,则不属于跨域请求;

解决方案:

1.修改浏览器的安全设置(不推荐)

2.CORS跨域资源共享(Cross-Origin Resource Sharing)

cors是浏览器的一份技术规范,定义了跨域资源访问时,

浏览器和服务器之间如何通讯;使用自定义的http头部允许浏览器和服务器建立通讯,从而避免浏览器的同源策略;

先了解一下基础内容

浏览器将CORS请求的两类:

跨域问题浅了解跨域概念了解
跨域问题浅了解跨域概念了解
cors需要浏览器和服务器同时支持

目前,所有浏览器都支持cors跨域【IE浏览器的版本不能低于10】,只需要服务端做出处理即可;

由上面举例实践 可以看出提示: Failed to load https://www.taobao.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource,请求的资源上不存在“Access Control Allow Origin”标头,

那么服务端只需要添加 response.setHeader(“Access-Control-Allow-Origin”, “*”) 或 注解形式,比如Spring Boot现有支持的注解,可以加在类/方法上 @CrossOrigin(origins=“https://localhost:8081”) 或 添加配置的形式

Access-Control-Allow-Origin

举例:

1.reponse返回 在当前地址下可以允许来自https://www.baidu.com 域发送请求:

Access-Control-Allow-Origin: https://www.baidu.com

跨域问题浅了解跨域概念了解

2.可以允许来自所有域的请求:

Access-Control-Allow-Origin: *

3.JSONP

这个是属于前端的一种解决方案,仅支持GET请求;

还有其他解决方法,后续学习补充…