zoukankan      html  css  js  c++  java
  • js ajax跨域调用

    正常使用ajax调用java.com
    $.ajax({
           type: 'get',
           url: 'http://www.java.com/custinfo?id=888',
    dataType: 'json',
    success: function(data){
    console.log('成功'
    );
    }
    });
    你会发现无法调用

    原因:

    JavaScript出于安全方面的考虑,不允许跨域调用其他项目。

    跨域,由于浏览器同源策略的限制,a.com 无法调用 b.com

    解决方案:  JSONP

    JQuery调用jsonp

    var url = 'http://www.java.com/custinfo?id=888&jsoncallback=?';
    $.getJSON(url,function(data){
      console.log('成功');
    });

    注意:如果java.com返回的是JSON格式的数据,你是取不到的。

        你会发现回调函数并没有调用

    json格式示例:

    {
       "code":"200",
       "msg":"成功" ,
       "data":[
          {
             "custNo":"100088" 
             "id":"888" 
          }
        ]      
    }

    如果服务端返回的是上面JSON格式的数据你是取不到的。

    需要服务端修改代码,返回JSONP格式的数据。

    jsonp格式示例:

    jsonpcallback(
        {
           "code":"200",
           "msg":"成功" ,
           "data":[
              {
                 "custNo":"100088" 
                 "id":"888" 
              }
            ]      
        }
    )

    看到两种格式的区别了吗?

    -----------------------------------------------------------------------------

    JSONP 只可以发送 GET 请求,无法发送其他类型的请求,

    推荐在后端通过 (CORS,Cross-origin resource sharing) 来解决跨域问题。

    传统的SSM 框架通过在 XML 文件中配置 CORS 来解决跨域问题 ,

    Spring Boot通过实现WebMvcConfigurer接口然后重写addCorsMappings方法解决跨域问题

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowCredentials(true)
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .maxAge(3600);
        }
    
    }

    ----------------------------------------------------------------------------------

    Spring Boot项目前后端分离部署需要解决跨域问题。
    cookie存放用户登录信息,在spring拦截器进行权限控制,当权限不符合时,直接返回给用户固定的json结果。
    当用户登录以后,正常使用;当用户退出登录状态时或者token过期时,由于拦截器和跨域的顺序有问题,出现了跨域的现象。
    http请求,先走filter,到达servlet后才进行拦截器的处理,把cors放在filter里,就可以优先于权限拦截器执行。

    @Configuration
    public class CorsConfig {
    
        @Bean
        public CorsFilter corsFilter() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*");
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            corsConfiguration.setAllowCredentials(true);
            UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
            urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsFilter(urlBasedCorsConfigurationSource);
        }
    
    }
  • 相关阅读:
    treap模板
    Codeforces Round #446 (Div. 2)
    BZOJ 1001: [BeiJing2006]狼抓兔子 (最小割)
    NOIP2017总结
    Python 操作 Mysql 模块
    poj 3660 Cow Contest (传递闭包)
    poj 1964 Cow Cycling(dp)
    poj 3671 Dining Cows (Dp)
    cogs 线型网络(状压dp)
    codevs 2800 送外卖(状压dp)
  • 原文地址:https://www.cnblogs.com/Alwaysbecoding/p/10911737.html
Copyright © 2011-2022 走看看