ajax跨域问题小结

最近自己遇到的一个ajax跨域的问题,这里记录一下,作为自己对相关问题的总结。

问题描述:

做一个spring-boot服务+antd前端的页面,在调试一个表格时出现了一个“诡异”的问题。首先封了一个测试的spring controller,功能很简单就是查询一张表,如下:

测试了一下没有问题:

接着是前端的代码:

调试一下,问题来了。提示No 'Access-Control-Allow-Origin'。

问题解决过程

因为自己对ajax跨域这部分了解的不够透彻,排查过程走了弯路,下面记录一下自己问题解决过程中踩的几个坑:

首先看了上面的报错信息,立马想到了这个是一个跨域的问题,jsonp支持跨域,于是把ajax部分代码改成如下:

调试的时候发现,没有效果,没有拿到内容,调试了一下发现代码压根没有进then的逻辑,怀疑ajax的写法有问题,但是试了几种写法都没有效果。

怀疑是否是后端提供的服务有问题,于是另外网上找了一个ajax请求,url替换成https://api.douban.com/v2/book/user/48051798/collections?count=5,发现逻辑竟然对了。调试代码能够进then了。

又排查了服务端,还是没有看出问题。最后还是仔细看了jsonp的原理,发现还是jsonp的使用方法有问题,要支持jsonp服务端也要做同步的修改。于是修改服务端代码如下,问题解决

总结

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本。利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。如上例中,服务端实际返回了如下内容:

除了用jsonp的方法解决跨域,spring boot也可以通过简单的跨域配置来解决跨域问题(推荐这种方式),增加如下配置,ajax就可以直接用dataType的方式来跨域访问了。

更多测试技术文章,微信扫以下二维码,欢迎关注

测码奔跑-让测试技术奔跑起来

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180131G1BZNI00?refer=cp_1026

相关快讯

扫码关注云+社区