目前正在做一个项目,后端使用的是SpringBoot,前端使用的是Vue(不要问我为什么不直接用node.js,我们只是想借此项目的机会了解更多前后端的知识~)在Vue上通过axios去访问后端的接口时,会产生报错,如下图所示:
image.png
究其根本,其实就是触犯了浏览器的同源策略,也就是我们常说的跨域!具体关于跨域的介绍请参考:https://www.cnblogs.com/cityspace/p/6858969.html
“同源策略”是浏览器的安全基石,为的是保护用户信息的安全,防止恶意网站窃取数据。所谓的“同源”,指的是协议相同、域名相同、端口相同。
image.png
所以,通过上面的报错可以看出,我的前端域名是http://localhost:8082/interface/group/1/9?timestamp=1542596465529,要访问的域名是http://localhost:8080,二者端口不同,所以形成了跨域。
除了axios请求(或ajax)会受到同源策略保护,cookie的共享也一样会受到同源策略保护。试想一下,如果你登录了一个银行网页A,浏览器在cookie中保存了你的信息;这时你又打开了一个网页B,如果没有同源策略,你的cookie就可以毫无保留的被网页B获取并通过恶意代码修改,产生很严重的安全问题。
OK,同源策略说了这么多,那怎么解决我们开头说的开发时跨域问题呢?废话不多说直接看代码
后端代码:
image.png
前端代码:
image.png
有小伙伴会问了,前后端的代码都需要修改吗?答案是Yes,一些有必要的注释已经加到代码里了,相信你们都可以看懂:)