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的方式来跨域访问了。

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

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