淘淘商城第102讲——js跨域测试

太过爱你忘了你带给我的痛 2022-12-21 15:53 149阅读 0赞

# 什么是跨域？ #

跨域是浏览器同源策略而产生的，在不同协议，不同域名，不同端口下（以上任意一个不同都算是跨域）的客服端和服务端之间是无法互相访问的。

举例来说，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center]  
**注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。**

# js跨域测试 #

## js不可以跨域请求json数据 ##

首先，我得说明一点，就是**js是不可以跨域请求json数据的。** 关于这一点，下面我会举一个案例来进行说明。

咱们先在taotao-sso-web服务层工程的webapp/js目录下放置一个sso\_json.json文件，其内容如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 1]  
然后在taotao-portal-web表现层工程的webapp目录下放置一个testportal.jsp页面，在该页面中发送一个ajax跨域请求来请求sso\_json.json文件中的json数据，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 2]  
一开始，我们可以在浏览器地址栏中输入`http://localhost:8088/js/sso_json.json`来进行访问，可以在浏览器中清楚地看到服务端返回来的json数据，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 3]  
但是现在我们在浏览器地址栏中输入`http://localhost:8082/testportal.jsp`进行访问，可以发现浏览器中显示的是一片空白，如果此时按下F12键，那么你将会看到浏览器控制台中打印出了一个如下错误。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]  
该错误的意思就是无法请求到`localhost:8088`的资源，原因就是禁止了跨域请求资源，也可以说是js不可以跨域请求json数据。

## 解决js的跨域问题可以使用jsonp ##

解决js的跨域请求问题可以使用jsonp，jsonp不是新技术，而只是跨域的解决方案，即使用js的一个特性来绕过跨域请求，该特性是**js可以跨域加载js（文件）。**

js虽然不可以跨域请求json数据，但是可以跨域请求js嘛！既然都能这样说，那我们也要用案例来验证一下。

首先在taotao-sso-web服务层工程的webapp/js目录下放置一个sso\_js.js文件，其内容如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 5]  
然后在taotao-portal-web表现层工程的testportal.jsp页面中发送一个ajax跨域请求，以便请求服务器提供的js脚本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]  
接着在浏览器地址栏中输入`http://localhost:8082/testportal.jsp`进行访问，可以发现虽然浏览器中显示的依然是一片空白，但是返回了服务器提供的js脚本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]  
这也从侧面验证了**js可以跨域加载js（文件）。**

那么现在我们可以发送一个如下的ajax跨域请求来请求sso\_json.json文件中的json数据了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]  
然后在浏览器地址栏中输入`http://localhost:8082/testportal.jsp`进行访问，发现服务器没有给我们任何响应，而且浏览器控制台还打印出了一个警告。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 9]  
为什么浏览器控制台会打印一个警告呢？这是因为ajax跨域请求中的dataType属性的值由json改成了script，说明我们现在请求的是js脚本，而sso\_json.json文件中的内容是一个json格式的数据，如下所示。

{ 
    	"id":1
    }

它压根就不符合js的语法，那怎么办呢？改呗！改成下面这个样子，让其符合js的语法。

fun({
    	"id":1
    })

此时，再在浏览器地址栏中输入`http://localhost:8082/testportal.jsp`进行访问，发现浏览器控制台又打印出了一个错误。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 10]  
出现这个错误的原因是咱们还没有定义fun方法，因此我们还得在testportal.jsp页面中定义好该方法，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 11]  
定义好以上fun方法之后，再在浏览器地址栏中输入`http://localhost:8082/testportal.jsp`进行访问，这时你会发现浏览器控制台打印出了json数据中的内容，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 12]  
以上就是jsonp的原理。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/caf46c22d02c413c89e11798f7f38525.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020111623242885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201116232436605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201116232444435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201116232452181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201116232501709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201116232510630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201116232519843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201116235910419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201116235918812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/2020111623592754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20201116235936127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/20201116235946206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center