全栈小白的gravatar头像
全栈小白 2023-02-10 16:44:59

springboot+vue+axios全栈项目开发中的跨域解决方案

项目描述

1、唠嗑部分

在前后端分离项目中,ajax是数据交互中不可缺少的一个js库,它能够实现局部刷新,替代原生全局刷新对用户的冲击感,提升了用户体验,目前像jQuery-ajax, 基于Promise风格的axios是时代的主流,但是殊不知,ajax受同源策略的限制

同源策略是浏览器的一种保护机制,是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,如果两个 URL 的协议、ip地址、端口都相同的话,则这两个 URL 是同源

违背同源策略就是跨域访问

例如 : 3000服务器给8080服务器发送数据请求,ajax放行,数据发送成功,8080收到请求,将数据返回给3000服务器,但是由于同源策略的影响,3000服务器将ajax带来的数据拒收了

开发环境解决方案:

  • 配置代理,适用于React、Vue等工程化项目,也可以自己搭建开发代理服务器

  • 服务器统一解决,一劳永逸

生产环境部署都是通过nginx解决

下面让我们一起来重温一下

2、案发现场

环境搭建,两个版本,分别使用Vue脚手架和非脚手架版,简单的登录功能,用户输入用户名密码实现登录逻辑

跨域复现

springboot+vue+axios全栈项目开发中的跨域解决方案

运行环境

jdk8+tomcat9+mysql+IntelliJ IDEA+maven

项目技术(必填)

springboot+vue+axios

是否原创(转载必填原文地址)

原创

项目截图(必填)

springboot+vue+axios全栈项目开发中的跨域解决方案

运行截图(必填)

解决原理

springboot+vue+axios全栈项目开发中的跨域解决方案

测试

springboot+vue+axios全栈项目开发中的跨域解决方案

注意事项(可选)

本案例带大家解决跨域,包含开发和生产的解决方式


打赏

已有1人打赏

最代码官方的gravatar头像

文件名:spring-boot-cross-domain-demo.zip,文件大小:347.37K 下载
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友