1. 概述
在日常开发工作中,跨域是一个比较常见的问题,尤其是前后端分离之后,跨域问题变得更加常见。那么到底什么是跨域?以及跨域是如何产生、如何解决呢?本文将分析什么是跨域,以及跨域产生的原因,并介绍三种从后端解决跨域的方案、以及在nginx服务端配置解决跨域问题,来帮助大家解决日常开发中的跨域问题。
2. 跨域原理及解决
2.1 什么是跨域
跨域是浏览器的同源策略所导致的,那么什么是浏览器的同源策略?
同源策略(Same Origin Policy,SOP):是一种浏览器安全策略,它是指:协议+域名+端口号,三者完全相同才算得上是同源,否则即使两个不同的域名指向同一个ip地址,也非同源。同源策略用于限制一个origin的文档或者其加载脚本与另一个源的资源进行交互,它能够帮助阻挡恶意文档,减少可能被攻击的媒介。
举个简单的例子描述上述场景:
页面A想获取页面B的内容,如果页面A、B的协议、域名、端口均相同,那么浏览器默认是同源,允许资源A访问。若协议、端口、域名中任意一个不相同,则浏览器默认是跨域访问,会自动禁止该访问,同源策略能够避免浏览器遭受XSS以及CSFR等攻击。
方法一
@CrossOrigin 添加注解在前端请求的方法(或该方法所在的类上),便允许CORS跨域。
方法二
package com.erp.yt.common.init.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* User: Json
* <p>
* Date: 2023/2/22
* 跨域配置
**/
@Configuration
public class CorsConfig {
@Bean
public CorsFilter createCorsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}
继承WebMvcConfigurer接口实现addCorsMappings()
package com.eckey.lab.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registration) {
registration.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "DELETE", "PUT", "HEAD", "OPTION")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
根据springboot 版本 一一尝试