前后端分离开发出现的跨域问题

先说说什么是跨域。

请求的URL地址中的协议、域名、端口号中的任意一个与当前URL不同就是跨域。

比如:

|--------------------------|-------------------------|------|-------|
| 当前页面的URL | 请求的URL | 是否跨域 | 原因 |
| htttp://localhost:8080 | htttps://localhost:8080 | 是 | 协议不同 |
| htttp://localhostll:8080 | htttp://localhost:8080 | 是 | 域名不同 |
| htttp://localhost:8080 | htttp://localhost:8081 | 是 | 端口号不同 |

那么,为什么会出现跨域问题?

这都是因为浏览器的同源策略,为了保证浏览器安全,防止恶意的网站攻击,浏览器限制了从不同源之间的交互。在不同源的情况下,无法发送Ajax请求,如果请求,浏览器就会报错。

这里我的前端跑在8081端口下,后端跑在8080端口上 ,虽然协议和域名都相同,但是端口号不同,这种情况就是跨域问题了,所以前端页面向后端发送请求就报错了。

这里有三种解决方案,且都是后端的解决方案:

报错信息截图:

SpringBoot项目中解决跨域的3中方案:

第一种: 在目标方法上添加@CrossOrigin注解

添加注解后,重新启动项目,前端发送请求,后端接收到请求后并成功响应了请求。

第二种:开启跨域资源共享

跨域资源共享,Cross-Origin Resource Sharing,简拼为 CORS,是一种基于 HTTP 头信息的机制,通过允许服务器标识除了它自己以外的资源,从而实现跨域访问。

添加一个配置类就ok了。

java 复制代码
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration configuration = new CorsConfiguration();
        //设置允许的域名
        configuration.addAllowedOrigin("*");
        //设置原始头信息
        configuration.addAllowedHeader("*");
        //设置允许所有的请求方法跨域调用
        configuration.addAllowedMethod("*");
        //创建source对象
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //添加映射路径
        source.registerCorsConfiguration("/**",configuration);
        return new CorsFilter(source);
    }
}

第三种: 实现WebMvcConfigurer接口,重写addCorsMappings方法

java 复制代码
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","DELETE","PUT","POST","HEAD","OPTIONS")
                .allowCredentials(true)
                .allowedHeaders("*");
    }
}
相关推荐
float_六七2 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
能摆一天是一天4 小时前
JAVA stream().flatMap()
java·windows
颜如玉4 小时前
🤲🏻🤲🏻🤲🏻临时重定向一定要能重定向🤲🏻🤲🏻🤲🏻
java·http·源码
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
星空寻流年6 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式
gb42152877 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
曾经的三心草7 小时前
Python2-工具安装使用-anaconda-jupyter-PyCharm-Matplotlib
android·java·服务器
Metaphor6927 小时前
Java 高效处理 Word 文档:查找并替换文本的全面指南
java·经验分享·word
ChinaRainbowSea7 小时前
7. LangChain4j + 记忆缓存详细说明
java·数据库·redis·后端·缓存·langchain·ai编程
stormsha7 小时前
飞算JavaAI炫技赛电商系统商品管理模块的架构设计与实现
java·架构·鸿蒙系统