前后端分离项目 springboot后端用CORS解决跨域问题

跨域问题主要是解决浏览器的安全机制:同源策略。
(大白话就是前端和后端应用不在同一个端口了,前后端的交互请求需要跨域,你不解决这个跨域的问题,它就请求不到)

跨域主要两种方法:前端解决使用proxy代理,后端解决使用cors
我的另一篇写了proxy的用法 https://blog.csdn.net/weixin_42540974/article/details/112212366

在前后端分离项目中,web管理端和移动端共用同一个springboot后台开发。

接下来都用我的web端请求举例
前端端口:http://localhost/9528
后端端口:http://localhost/8081

没做跨域处理的时候:
浏览器的同源策略不允许跨域访问,请求头中没有 Access-Control-Allow-Origin 的信息
前后端分离项目 springboot后端用CORS解决跨域问题_第1张图片

后端代码:
实现WebMvcConfigurer并重写addCorsMappings方法,如图
前后端分离项目 springboot后端用CORS解决跨域问题_第2张图片
.allowedOrigins(“http://localhost:9528”,“http://localhost:8080”);
这句是说 这两个地址通过浏览器请求的时候,允许请求到这个后端
前后端分离项目 springboot后端用CORS解决跨域问题_第3张图片

发送请求
前后端分离项目 springboot后端用CORS解决跨域问题_第4张图片
前后端分离项目 springboot后端用CORS解决跨域问题_第5张图片
第一次请求时会发送两次请求,先发送一次OPTIONS请求,进行试探,然后再执行POST请求

前后端分离项目 springboot后端用CORS解决跨域问题_第6张图片

Host:是正在运行的后台的端口号
Origin:是允许进行跨域访问的地址,只要是这个地址向浏览器发送请求,都可以访问成功

你可能感兴趣的:(SpringBoot)