资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

springboot+jsonp解决前端跨域问题小结

现在咱们一起来讨论浏览器跨域请求数据的相关问题。说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范。该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下:

专注于为中小企业提供做网站、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业衡山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了数千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

浏览器同源策略讲解

总的来说,当A网址和B网址在 协议 、 端口 、 域名 方面存在不同时,浏览器就会启动同源策略,拒绝A、B服务器之间进行数据请求。

说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我将结合代码一步一步进行演示。

1、A服务器请求不了B服务器的情况

既然是跨域,我就假设我有两个域名,分别是 A 和 localhost , A 表示小编在阿里云上主机域名, localhost 顾名思义就是小编的开发机器了。我们想象这样一个场景,在 localhost 上部署一个 index.html 文件,在 A 服务器上部署一个简单的 spring-boot 后台服务,并提供一个简单的接口暴露给 index.html 文件调用,最后浏览器请求 localhost 的 index.html 文件,看浏览器提示什么?

index.html




测试跨域访问



  
  
    

hello world

浏览器上请求 index.html 文件,显示如下:

springboot+jsonp解决前端跨域问题小结

可以发现,请求被浏览器给拒绝了,提示我们不允许跨域请求数据,很难受,怎么解决呢?

2、使用 jsonp 解决跨域请求

首先讲下原理,jsonp解决跨域问题主要利用了

A 服务器上的接口代码为:

/**
 * 
 * The class JsonBackController.
 *
 * Description:该控制器返回一串简单的json数据,json数据由一个简单的User对象组成
 *
 * @author: huangjiawei
 * @since: 2018年6月12日
 * @version: $Revision$ $Date$ $LastChangedBy$
 *
 */
@RestController
@RequestMapping(value = "/map")
public class JsonBackController {
  private static final Logger logger = LoggerFactory.getLogger(JsonBackController.class);
  /**
   * 解决跨域请求数据
   * @param response
   * @param callbackName 前端回调函数名
   * @return
   */
  @RequestMapping(value = "getUser.json")
  public void getUser(HttpServletResponse response, @RequestParam String callbackName) {
    User user = new User("huangjiawei", 22);
    response.setContentType("text/javascript");
    Writer writer = null;
    try {
     writer = response.getWriter();
     writer.write(callbackName + "(");
     writer.write(user.toString());
     writer.write(");");
    } catch (IOException e) {
     logger.error("jsonp响应写入失败! 数据:" + user.toString(), e);
    } finally {
     if (writer != null) {
     try {
      writer.close();
     } catch (IOException e) {
      logger.error("输出流关闭异常!", e);
     }
     writer = null;
     }
    }
  }
}

后端传入一个参数 callbackName 回调函数名,然后返回一段js代码给前端,js代码格式如下:

callbackName + ( data ) + ;

浏览器请求 localhost 服务器上的 index.html 文件,结果如下:

springboot+jsonp解决前端跨域问题小结

上面这种方式是通过 jquery + jsonp 解决跨域问题的,刚刚不是说可以用

浏览器显示效果和上面一致。但此处需要注意的是, src 表示引入一个js文件,由于是直接调用接口,而接口返回的数据又刚好是一段js代码,故能被执行。另外,第二个