【不正经的踩坑经历】关于我的ajax跨域测试经历

• 2019-06-05
  今天测试一个接口，之前的接口大部分是同步完代码可以在本地访问到的，这次的接口是在本地文件中访问同事的ip，涉及到跨域问题。但是关于跨域之前掌握的就不是很好，所以又是一次踩坑的经历，记录一下

测试过程全记录TAT…

1. 首先先测试一下接口是不是可以正常访问到，直接在网页地址栏访问这个接口，可以收到正常的数据，所以可以排除接口的问题了。

2. 然后是正经的测试阶段，按照常规先写一个ajax。
   当然了，连想都不用想，这个是肯定不能获取到的了，不然我也不用这么麻烦。

$.ajax({
		type:"get",
		url:"http://192.168.4.115:8080/Ajax/test.ashx?t=GetSmallCaseLog&" + id,
		async:true,
		success: function(data){
			console.log("success: ",data);	
		},
		error: function(data){
			console.log("error: ",data);
		}
	});

3. 我们继续走流程，此时应该不慌不忙的加上jsonp格式来做跨域的处理：

$.ajax({
		type:"get",
		url:"http://192.168.4.115:8080/Ajax/test.ashx?t=GetSmallCaseLog&" + id,
		async:true,
        dataType: 'jsonp',
        jsonp : "callback",
		success: function(data){
			console.log("success: ",data);	
		},
		error: function(data){
			console.log("error: ",data);
		}
	});

4. 当然也不能忘了让后端小伙伴加上callback()这个外面的层（我不知道该怎么描述，就是用callback把原来的数据包裹起来，你们懂我意思的~）。
   到了这一步本来就应该品尝胜利的果实了，但是偏偏…
   
   啊！…这到底是为什么…这家伙不按套路走啊！ 教科书上明明不是这样说的！
   最气人的是我都看到数据格式了，就是我想要的模样啊！
   
   没办法… 那我只好再次思（bai）考（du）怎么处理这种问题

5. 然后我就看到了各位大大们的代码写法，比如：

$.ajax({
		type:"get",
		url:"http://192.168.4.115:8080/Ajax/test.ashx?t=GetSmallCaseLog&" + id,
		async:true,
        dataType: 'jsonp',		//只写dataType，不写jsonp
		success: function(data){
			console.log("success: ",data);	
		},
		error: function(data){
			console.log("error: ",data);
		}
	});

$.ajax({
		type:"get",
		url:"http://192.168.4.115:8080/Ajax/test.ashx?t=GetSmallCaseLog&" + id,
		async:true,
		dataType: "jsonp",		//不仅写dataType，还有jsonp和jsonpCallback
		jsonp: "callbackparam",
		jsonpCallback:"success_jsonpCallback"
		success: function(data){
			console.log("success: ",data);	
		},
		error: function(data){
			console.log("error: ",data);
		}
	});

看起来很可行的样子！而且大大们都成功接收到数据了！那我来挨个试试看吧！

（1）首先尝试一下只写dataType，满怀期待的刷新等待我们返回的数据！

emmmm…怎么感觉病情好像加重了…
但是为什么会在error里面返回啊喂！Status Code明明是 200 啊喂！难道你自己不觉得很矛盾吗！
但是根据我自身的经（bai）验（du），我知道在code为200但是在error里面返回是因为数据格式错误，所以这种方式并不比刚才的方法好一点。

（2）那就尝试另一种方法吧！没必要在这一个南墙上撞死嘛！
同时写好dataType、jsonp和jsonpCallback，现在就是见证奇迹的时刻！

之前测试的时候好像是没有上面的报错提示的，不知道是我记错了还是哪里操作有问题，反正我刚刚复现操作回去截图的时候他是这样的
…不过好像也没什么差别…我的前途一片灰暗…

6. 四处碰壁的我…只好又一次踏上了寻找真理的路途…
   果然皇天不负有心人！我无（zhong）意（yu）中看到了一位大大这么说：
   
   哦~此时我的小脑袋里面蹭蹭蹭的一连冒出好几个思路！那就决定是你了！

$.ajax({
		type:"get",
		url:"http://192.168.4.115:8080/Ajax/test.ashx?t=GetSmallCaseLog&" + id,
		async:true,
        dataType: 'text',
		success: function(data){
			console.log("success: ",data);	
		},
		error: function(data){
			console.log("error: ",data);
		}
	});

果然！接口终于正经的返回给我想要的数据了，是这个样子的：

没错！这就是我心心念念想的数据！

剩下的就非常简单了，把字符串截取出来，然后转换为JSON对象，后面就随便用了_（开心）

后记

虽然这次最后完成了想要的效果，还用比较好笑的语气记下来了，但是实际上这也暴露了自己对跨域这一方面确实理解和掌握都不足够，也比较局限，所以后面也会尽快补足这方面的知识。
这篇文章也是用来警醒自身的一个例子，希望日后能够在技术方面更加精进。