ajax跨域访问的两种方式

谁借莪１个温暖的怀抱￠ 2022-06-17 08:22 264阅读 0赞

讲跨域访问之前，先要了解一个概念：同源策略

同源策略 指的是，当一台电脑去访问一个服务器的时候，

它们两的主机地址（ip）、协议名、端口都一致时，叫同源策略；

反之只要有其中一个不相同就是不同源；

这时候的访问就叫跨域访问；

浏览器处于安全考虑，不允许两个不同源之间的页面交互数据；

关于解决跨域访问的两种方式：

第一种： 让后台哥们在接口那边加 一句如下代码：

header('Access-Control-Allow-origin: \*');

这是W3c推出的跨域请求的标准；  
该规范地址：http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/）

它的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。

该规范要求浏览器对请求进行“预先验”，这里不做详细介绍；

第二种： 使用jsonp跨域请求：

jsonp是jquery帮我们封装好的一种跨域请求；

书写格式：

![Center][]

注意红线的地方：只要在jQuery里的ajax请求里加上 dataType : jsonp就可以了；

JSONP 这种跨域方案 是广大 聪明的程序员想出来的 非官方 跨域方案  
    虽然不同源的页面不能直接发送请求但是 拥有 src属性的 dom元素 是可以 去跨域获取数据的

JSONP就是利用 script标签的 src属性 可以跨域访问数据来实现的 发送的请求是 GET请求；

再请求结束后再把该script标签删掉；

![SouthEast][]  
![SouthEast 1][]  
  
     
    服务器那边收到请求后会在doSomething后面拼加上“（）” ，然后把要返回的数据通过参数的形式传给我们；

我们点到收到返回的数据形式大概是这样doSomething（\{ "name" : xxx, "age" : 00 \}）;

然后我们的浏览器会帮我们解析调用这个方法并接收了传过来的数据；

jsonp跨域请求的原理大概是这样，只不过在jquery中帮我们封装的更好；

[Center]: /images/20220617/3602c7bb689e49ffb5d701f607e4f4f4.png
[SouthEast]: /images/20220617/54341e78bd1448c39db26c72a9efa54a.png
[SouthEast 1]: /images/20220617/ac0f75fe15c64217acb8be3205c611a9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax跨域的几种实现方式

什么是跨域同协议，同ip，同端口视为一个域，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。原生态ajax跨域实现通过动态创

ゞ浴缸里的玫瑰/ 2022年11月30日 05:46/ 0 赞/ 253 阅读

相关 java ajax 跨域_解决ajax跨域访问问题

前端js: $.ajax(\{ url:'http://localhost/xxxx/test', //后台处理程序 async:true, type:'get',

末蓝、/ 2022年11月03日 10:53/ 0 赞/ 270 阅读

相关 Ajax+PHP实现跨域访问的两种方式

1.兼容IE浏览器的方法，在Ajax请求的时候使用jsonp： $("search").click(function() { $.ajax({

阳光穿透心脏的1/2处/ 2022年08月20日 14:08/ 0 赞/ 228 阅读

相关解决ajax跨域访问 JQuery 的跨域方法

JS的跨域问题，我想很多程序员的脑海里面还认为JS是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实

浅浅的花香味﹌/ 2022年07月12日 10:10/ 0 赞/ 295 阅读

相关 ajax跨域访问的两种方式

讲跨域访问之前，先要了解一个概念：同源策略同源策略指的是，当一台电脑去访问一个服务器的时候，它们两的主机地址（ip）、协议名、端口都一致时，叫同源策略；反之只要有

谁借莪１个温暖的怀抱￠/ 2022年06月17日 08:22/ 0 赞/ 265 阅读

相关 ajax跨域后台允许跨域访问

参考博文：[https://blog.csdn.net/djl0906/article/details/70238847][https_blog.csdn.net_djl090

小咪咪/ 2022年05月18日 04:16/ 0 赞/ 357 阅读

相关 ajax 和跨域访问

ajax与jsonp ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后

拼搏现实的明天。/ 2022年05月09日 14:36/ 0 赞/ 255 阅读

相关 ajax跨域访问解决

> ajax访问域名遇见的跨域问题，在被访问的nginx配置文件上的http节点加上下面几句话就好了。 add_header Access-Control-Allow

雨点打透心脏的1/2处/ 2022年04月18日 03:45/ 0 赞/ 290 阅读

相关 ajax实现跨域访问

ajax跨域访问是一个老生畅谈的问题啦，网上解决方法很多，discuz用的p3p协议，有兴趣的朋友可以了解下，比较常用的是JSONP方法，貌似目前这种方法只支持GET方式，不如

古城微笑少年丶/ 2021年12月16日 11:11/ 0 赞/ 359 阅读

相关 Ajax跨域访问解决

$.ajax({ url:"http://a.com/ver?jsoncallback=?", dataType:

向右看齐/ 2021年12月13日 15:11/ 0 赞/ 378 阅读