CORS跨域问题处理

106 阅读2分钟

一、跨域的概念

    跨域问题是源自“同源策略”,“同源策略”是一种约定,本质上是限制一个域的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;  
    }  
}