跨域请求

跨域请求:实际经验说明只要不在同一个项目里面,异步请求另外一个项目,就要使用jsonp,否则请求不会成功. 而且jsopn的请求方式只能是get请求,post请求不支持jsonp的请求.

发送请求代码:

$.ajax({

                                     url:'http://10.10.37.234:4567/visitorDeatil/submit',

                                     dataType:'jsonp',

                                     type:"get",

                                     contentType:'application/json',

                                     data:{

                                                        contacts:"dfdf",

                                                        company:"fdfd",

                                                        duty:"dsfsdf",

                                                        remak:"fdsf",

                                                        phone:"fsdf",

                                                        systemCode:"1"

                                               },

                                               success:function(data) {

                                                        callback(data)

                                               }

                                     })

//这样才能拿到数据

                   functioncallback(data){                    

                            alert(data.msg)

                  

                   }

Jsonp请求路径上有callback函数,所以在服务中返回数据的时候,跟普通的请求的返回数据是不一样的,要返回一个js格式的数据,相当于把数据放到callback的函数里面返回.

服务端的代码:

@RequestMapping(value = "/submit", method = RequestMethod.GET)

    @ResponseBody

    public Objectsubmit(VisitorProbationDetail visitor, Stringcallback) throws Exception {

       if (StringUtils.isEmpty(visitor.getContacts()) ||StringUtils.isEmpty(visitor.getCompany())

              || StringUtils.isEmpty(visitor.getPhone())) {

           String result = callback + "(" + JSONObject.toJSON(ApiResult.build(0,"信息不完整!!!")).toString() +");";

           returnresult;

       }

       String msg = visitorService.save(visitor);

       if (0 ==msg.length()) {

           String result = callback + "(" + JSONObject.toJSON(ApiResult.build(200,"恭喜您申请成功!!!")).toString() +");";

           returnresult;

       }

       returncallback +"(" +JSONObject.toJSON(ApiResult.build(0,msg)).toString()+");";

    }

 

于普通请求返回数据不同的地方就是把json数据做了一层封装,封装到callback函数里面.

更高级的实现方式 在java后端设置一个拦截器  js 和原生js一样 不需要任何的处理 接口的返回也不需要()包裹;

所有的操作都是和不跨域的请求一样的;

@Component
public class CORSInterceptor extends HandlerInterceptorAdapter {

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
      //添加跨域CORS
      response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type,token");
      response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
      return true;
  }

}

@Configuration
public class WebMvcConfigurer extends WebMvcConfigurerAdapter   {

 
    public void addInterceptors(InterceptorRegistry registry) {  
        registry.addInterceptor(new CORSInterceptor()).addPathPatterns("/**");  
    } 


}