美文网首页
SpringBoot2.1解决跨域请求

SpringBoot2.1解决跨域请求

作者: 也许________ | 来源:发表于2018-11-22 16:53 被阅读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);
    }

相关文章

  • SpringBoot2.1解决跨域请求

    先贴出使用jsonp形式完成跨域请求的办法ps:服务器端不需要设置任何跨域配置但ajax请求需要注意其属性data...

  • 跨域

    ??JSONP只能解决GET请求跨域,不能解决POST请求跨域问题,XHR2可以解决GET,POST方式的请求跨域...

  • node跨域头

    Nodejs解决跨域请求 例

  • 跨域

    什么是跨域? 为什么会发生ajax跨域?浏览器限制跨域【发出的请求不是本域】XHR请求【json】 解决思路:1:...

  • AJAX出现两次请求 options和get|post

    跨域请求 允许跨域请求 preflighted request预请求(options) 跨域请求 XMLHttpR...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • axios发送俩次请求的原因

    其实跨域分为简单跨域请求和复杂跨域请求 简单跨域请求是不会发送options请求的 复杂跨域请求会发送一个预检请求...

  • koa2解决跨域请求和options请求

    跨域 使用koa-cors解决跨域问题 添加一个中间件 解决options请求 由于做了跨域,所以前端用post请...

  • 【跨域】解决办法:利用 Access-Control-Allow

    【跨域】解决办法:利用 Access-Control-Allow-Origin 传统的跨域请求没有好的解决方案,无...

网友评论

      本文标题:SpringBoot2.1解决跨域请求

      本文链接:https://www.haomeiwen.com/subject/xiglqqtx.html