前后端跨域问题解决方案及原理

1. 前端跨域问题

//原理：浏览器不能执行其他网站的脚本。由浏览器的同源策略(协议、域名、端口三全同，否则跨域)造成。跨域原理即通过各种方式避开浏览器的安全限制。
1.JSONP(JSON with Padding):JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题
  	1.1 原理：利用标签的src属性不受限制的特点动态创建script标签,向一个不同源的接口get请求，只支持get请求
    1.2 jQuery中的jsonp：只需要添加dataType:'jsonp'
      	<script>
          $.ajax({
          url:""，
					type : "get"，
					dataType: "jsonp"，
					data:{id:1},
          success: function(backData){alert(backData)};
          )}
				</script>
2.CORS(Cross Origin Resource Share资源共享):原理是服务器返回响应报文时，在响应头中设置header(服务端设置即可，若带cookie前后端都要设置)
	 	2.1 res.setHeader('Access-Control-Allow-Origin', '*') 	//服务器设置CORS,允许浏览器跨域
    2.2 更简单的CORS方案：express使用中间件cors，自动给每一个res设置默认请求头
      	//1.下包 
					$ npm install cors
				//2. 配置中间件 
          var cors = require('cors') 
          app.use(cors()
				//3.cors中间件底层原理如下
          app.use((req, res, next) => {//任何请求都会进入这个use中间件 
          res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头 
          next()//执行下一个中间件  })

3.代理跨域：
  	vue下面有代理，图片跨域加crossorigin，接口跨域用fiddler抓包拦截掉request请求，加上header头加上cross origin all
4.配置代理(一般配的都是反向代理)
	说明: 代理会有正向代理(VPN,翻墙工具),反向代理(转发资源,解决跨域)
        正向代理的特点:代理(隐藏)客户端，服务器并不知道真实发请求的那个客户端是谁
        反向代理的特点: 代理的是服务端，客户端并不知道你访问的到底是哪台服务器

		前端主要是在开发环境来配置 (测试和生产环境由后端或运维来配置)
		方案: webpack devServer (开发环境方案)  node、 nginx 配置(测试和生产环境方案)

2. 后端跨域问题

 /**
     * 跨域配置
     */
    @Bean
    public CorsFilter corsFilter()
    {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置访问源地址
        config.addAllowedOrigin("*");
        // 设置访问源请求头
        config.addAllowedHeader("*");
        // 设置访问源请求方法
        config.addAllowedMethod("*");
        // 对接口配置跨域设置
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

报错：Get top window error, error: DOMException: Blocked a frame with origin “https://login.dingtalk.com” from accessing a cross-origin frame
问题：后端跨域问题解决