跨域问题及解决

什么是跨域问题 ?_?

跨域：浏览器对于javascript的同源策略的限制 。

1. 出现跨域的情况

• 域名不同 京东 淘宝
• 域名同，端口不同
• 二级域名不同 item.jd.com miaosha.jd.com
• http和https也属于跨域

2. 为什么有跨域问题？

跨域不一定都会有跨域问题，跨域问题 是针对ajax的一种限制。

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

在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同

3. 解决跨域问题的方案

• Jsonp：最早的解决方案，利用script标签可以跨域的原理实现。

  • 需要服务的支持
  • 只能发起GET请求

• nginx反向代理

  • 思路是：利用nginx把跨域反向代理为不跨域，支持各种请求方式(配置成只有一个server，根据url不同代理到不同服务)
  • 缺点：需要在nginx进行额外配置，语义不清晰

• CORS

  • 规范化的跨域请求解决方案，安全可靠。
  • 优势：
    • 在服务端进行控制是否允许跨域，可自定义规则
    • 支持各种请求方式
  • 缺点：
    • 会产生额外的请求

上述nginx违反了devops(Debelopment和Opreations), 即过程，方法与系统的统称(就是你解决问题不能给其他部门带来麻烦)

4. cors解决跨域

cors是一个w3c标准，全称“跨域资源共享”

• 解决方式：cors允许浏览器向源服务器发出XMLHttpRequest请求来解决问题
• 代码：添加一个过滤器，在响应头中加入一些信息即可
  • Access-Control-Allow-Origin: http://manage.leyou.com
  • Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Methods: GET, POST, PUT
  • Access-Control-Allow-Headers: X-Custom-Header

@Configuration
public class CorsConfiguration
{
    @Bean
    public CorsFilter corsFilter()
    {
        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();

        // 允许跨域访问的域名 如果携带cookie 不能写* *代表所有域名都可以访问
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.setAllowCredentials(true);// 允许携带cookie
        configuration.addAllowedMethod("*");    // 代表所有请求方法 GET POST PUT Delete...
        configuration.addAllowedHeader("*");// 允许携带任何头信息

        // 初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
        configurationSource.registerCorsConfiguration("/**", configuration);

        // 由SpringMVC提供 `在这里插入代码片`返回conrsFilter实例 参数：cors配置源对象 
        return new CorsFilter(configurationSource);
    }
}