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脚手架和非脚手架版，简单的登录功能，用户输入用户名密码实现登录逻辑

跨域复现

运行环境

jdk8+tomcat9+mysql+IntelliJ IDEA+maven

项目技术(必填)

springboot+vue+axios

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

原创

项目截图(必填)

运行截图(必填)

解决原理

测试

注意事项(可选)

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