SpringBoot2.1解决跨域请求

2018-11-22  本文已影响42人  也许________

先贴出使用jsonp形式完成跨域请求的办法
ps:服务器端不需要设置任何跨域配置
但ajax请求需要注意其属性dataType和jsonp,其中jsonp的值callback可以自定义,服务器端返回时需要与自定义的相同

$('#jsonpBtn').click(function(){

        var obj = {};
         obj.name='test';
         obj.price = '100';

          $.ajax({
             url : 'http://127.0.0.1:8081/firstDemo/jsonp',
             type : 'POST',
             dataType : 'jsonp',
             jsonp : 'callback',
             data : {
                   'info' : JSON.stringify(obj)
             },
             success : function(data){
                  console.log('in success');
                  console.log(data);
             },error : function(data){
                  console.log('in error');
             }
         });
 });
callback参数可以通过方法参数获取,也可以使用request获取,返回数据时注意拼接的形式 --> callback(返回的数据)
@RequestMapping("/jsonp")
    public String jsonp(String callback, HttpServletRequest request) {

        logger.info(callback);
        logger.info(request.getParameter("callback"));
        logger.info(request.getParameter("info"));

        Item item = new Item();
        item.setName("测试产品11");
        item.setPic("abc11");
        item.setPrice(100);
        return callback+"("+ JSONObject.toJSONString(item) +")";
    };

SpringBoot可以配置跨域请求,配置完成后,正常发送ajax请求就可以了,需要注意ajax的返回值类型,如果服务器返回非json格式的字符串(例:success, ok, y 这种形式的字符串),那么需要设置为text,否则不会进success回调,而是进入error回调,如果是json格式的字符串,则设置为json即可

@Configuration
public class GlobalConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedHeaders("*").allowedOrigins("*").allowedMethods("*");
    }

}
addMapping允许的请求路径,设置为 /** 表示所有路径都允许被跨域请求,allowedHeaders允许的请求头,allowedOrigins允许的域名,allowedMethods允许的方法
$('#btn').click(function () {
       $.ajax({
          url: 'http://127.0.0.1:8081/firstDemo/index',
           type: 'POST',
           dataType: 'json',
           success: function (data) {
               console.log('in');
               console.log(data);
           }, error: function (data) {
              alert('error');
              console.log(data);
           }
       })
 });
@RequestMapping("/index")
    public String index() {
        Item item = new Item();
        item.setName("测试产品11");
        item.setPic("abc11");
        item.setPrice(100);
        return JSONObject.toJSONString(item);
    }
上一篇 下一篇

猜你喜欢

热点阅读