跨域问题总结

跨域问题

背景：由于实验室项目时常产生跨域问题，因此就想写一篇博客来归纳和总结一下跨域问题

一、跨域的产生

三个地方，任何一个不同都将产生跨域

1、访问协议：http https

2、访问地址 192.168.1.1 171.11.1.1

3、端口号：9528 8201

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

二、跨域产生的原因

跨域不一定都会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。

因此：跨域问题 是针对ajax的一种限制。

三、解决办法

1、在Controller中加上注解

@CrossOrigin 

这个注解可以解决基本上所有的跨域问题，但是项目中实现的接口类比较多，添加比较多。

于是就有找了一个比较通用的方法，添加了一个@Configuration配置类，里面配置相关的跨域配置，可以解决所有接口的跨域问题

2、使用网关解决跨域（推荐使用）

就是Spring版本更新后，直接添加这个配置类可能不成功。

思路：将这个配置类注入到bean中，配置拦截器上，就可以每个请求解决跨域问题

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration cfg = new CorsConfiguration();
        cfg.setAllowCredentials(true);
        cfg.addAllowedOrigin("*");
        cfg.addAllowedMethod("*");
        cfg.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", cfg);
        return new CorsWebFilter(source);
    }
}

3、使用nginx代理解决跨域

原理：两个不同的域通过nginx代理成一个域，从而解决跨域问题。

该方法适用与你无法修改后端源码的情况下使用

	server{
		listen 8089;
		server_name  localhost;
		location /test {
			proxy_pass http://localhost:8080/;
			add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
			autoindex on;
			autoindex_exact_size off;
			autoindex_localtime on;
			
		}
		location /sys { 
               	#rewrite ^/api/(.*) /$1 break;
               	proxy_pass http://127.0.0.1:8083;
       	}
	}

上述nginx代理思路：

1、监听8089端口

2、/test路径代理到前端页面

3、/sys路径代理到后端请求的接口

通过上述代理可以解决前端请求后端的跨域问题，其中跨了ip和端口

四、补充

本地服务器直接打开html文件的访问协议是 file协议，在浏览器打开html文件是http协议，因此需要在浏览器中打开或者通过tomcat打开该网页。