解决跨域问题分享

目前正在做一个项目,后端使用的是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,一些有必要的注释已经加到代码里了,相信你们都可以看懂:)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容