一、跨域的概念
跨域问题是源自“同源策略”,“同源策略”是一种约定,本质上是限制一个域的JavaScript脚本和另一个域内的内容进行交互。
“同源策略”是保证浏览器安全的一种核心机制,所有浏览器在实现上都必须实现该机制,否则该浏览器将会非常容易被攻击。所谓“同源”,即在一个域内,一个域由协议、主机、端口三部分组成,有任何一个部分不同,都不是一个域、一个源。
如在www.test.com这个网页中它的js无法与其他域(www.test1.com)中的内容进行交互。
请求头:
Origin:值可以为 “http://127.0.0.1:80”,指明请求来自于那个站点 (所有跨域请求都会携带Origin请求头)
响应头(响应携带这两个响应头表示跨域成功):
Access-Control-Allow-Origin : 指明哪些请求源被允许访问资源,值可以为 "","null",或者单个源地址。*
Access-Control-Allow-Credentials : 指明当请求中省略 creadentials 标识时响应是否暴露。对于预请求来说,它表明实际的请求中是否可以包含用户凭证。 值为true或false
二、跨域处理
1、Nginx 配置
server {
listen 80; # 监听的端⼝
server_name www.test.com; # 域名或ip
location / { # 访问路径配置
#允许跨域请求的域,* 代表所有,不推荐使用,有安全隐患;也可以是域名或ip即允许当前域名或ip跨域
add_header 'Access-Control-Allow-Origin' 'www.test.com';
#add_header 'Access-Control-Allow-Origin' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法,比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;
root /usr/share/nginx/html;# 根⽬录
index index.html index.htm; # 默认⾸⻚
}
error_page 500 502 503 504 /50x.html; # 错误⻚⾯
location = /50x.html {
root html;
}
2、后端跨域处理
@Configuration
public class CorsConfig {
@Autowired
private Environment env;
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 设置你要允许的网站域名,如果全允许则设为 * ,不推荐使用,存在安全隐患
// // 可以在配置文件中设置 允许跨域的域名或站点
String corsUrl = env.getProperty("server.crosUrl");
List<String> originPatterns = StringUtil.isEmpty(corsUrl) ? Collections.singletonList("*") : Arrays.asList(corsUrl.split(","));
config.setAllowedOriginPatterns(originPatterns);
// 如果要限制 HEADER 或 METHOD 请自行更改
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
// 这个顺序很重要哦,为避免麻烦请设置在最前
bean.setOrder(0);
return bean;
}
}