前后端分离开发,必须解决跨域问题!
跨域:对于 url 如 http://localhost:8080
,请求协议、ip 地址、端口号,只要发送请求方和接收请求方的这三个数据中,只要有一个不同,就表示是跨域访问!
AJAX 跨域访问:用户访问 A 网站时所产生的对 B 网站的跨域访问请求均提交到 A 网站的指定页面
跨域问题,可以理解为浏览器的一种保护机制,不接收不被信任的请求。
如果前端和后端集中开发,比如单体项目中,他们的请求都是统一的,则不存在跨域问题!
跨域问题主要出现在前后端分离的项目中,前端和后端分离,请求方式不统一,此时必须解决跨域问题!
其他说明参考:
跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
最简单的说就是从当前域名的网站下不能请求非同源的地址。
所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。
请特别注意:跨域问题是针对于浏览器的,因为需要解决的跨域问题,是浏览器施加的安全限制所造成的。
跨域是指跨域名的访问,有三种情况:
- 域名不同的跨域
- 域名相同、端口不同的跨域
- 二级域名不同的跨域
举例说明:
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
跨域会阻止什么操作?
浏览器是从两个方面去做这个同源策略的
一是:针对接口的请求
二是:针对Dom的查询
这点就能够很好的防止别人把你经常访问的网页嵌入到 iframe 中来获取你的个人信息,比如 a 页面中嵌入了 iframe,src 为不同源的 b 页面,则在 a 中无法操作 b 中的 dom,也没有办法改变 b 中 dom 中的 css 样式。
而如果 ab 是同源的话是可以获取并操作的。
————————————————
原文链接:https://blog.csdn.net/qq_39552268/article/details/116274094
情景:前后端分离项目中,前端浏览器通过 ajax 异步访问后端接口,后端响应数据时,前端出现跨源请求被拦截的问题,也就是跨域访问问题。
分析:前端发送请求,后端正常接收,只是后端响应数据时,前端接收有问题,问题出在前端接收响应这步上,浏览器会拦截跨源请求。
两种解决方案:(身为后端开发,我们主要通过后端解决此跨域问题)
-
在前端解决:在前端通过 JSONP 的配置,设置前端允许跨域
-
在后端解决:在后端设置响应数据,允许跨域
步骤:在控制器类上,直接添加
@CrossOrigin
注解即可,其主要作用是设置响应头,允许跨域访问。