简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 跨域请求CORS与JSONP
Blogger Information
Blog 36
fans 1
comment 0
visits 29633
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
跨域请求CORS与JSONP
Jason
Original
726 people have browsed it

跨域请求CORS与JSONP

CORS是什么？

CORS是一个W3C标准，全称是“跨域资源共享”.它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

同源策略

  • 多个页面的协议，域名，端口完全相同，他们就遵循了“同源策略”

CORS怎么用？

前台部分

  1. <title>跨域请求</title>
  2. </head>
  3. <body>
  4.     <button>跨域请求</button>
  5.     <h2></h2>
  6. </body>
  7. <script>
  8.     var btn = document.querySelector("button");
  9.     btn.addEventListener(
  10.         "click",
  11.         function () {
  12.             // 创建AJAX对象
  13.             var xhr = new XMLHttpRequest();
  14.             // 监听请求
  15.             xhr.onreadystatechange = function () {
  16.                 if (xhr.readyState === 4 && xhr.status === 200){
  17.                     console.log(xhr.responseText);
  18.                     document.querySelector("h2").innerHTML = xhr.responseText;
  19.                 }
  20.             };
  22.             // 初始化请求参数
  23.             xhr.open("GET","http://m.xt520.xyz/cors.php",true);
  25.             xhr.send(null);
  27.         },
  28.         false
  29.     );
  30. </script>

后台部分：

  1. <?php
  3. header('Access-Control-Allow-Origin:*');
  4. header('content-type:text/html;charset=utf-8');
  5. echo "这是服务器上的资源";
  6. flush();
  7. ?>

效果图：

注意点：

1.Access-Control-Allow-Origin:表示允许任何域名跨域访问，如果需要指定域名才允许跨域访问，只需把Access-Control-Allow-Origin:允许的域名。

JSOP怎么用？

前台部分：

  2. <body>
  3.     <button>跨域请求——JSONP</button>
  4.     <script>
  5.         // 1.准备好处理回调函数
  6.         function handle(jsonData) {
  7.             console.log(jsonData);
  8.             var data = JSON.parse(jsonData);
  9.             console.log(data);
  11.         // 将接口返回的数据渲染到页面中
  12.         var ul = document.createElement("ul");
  13.         ul.innerHTML += "<li>" + data.title + "</li>";
  14.         ul.innerHTML += "<li>姓名" + data.user.name + "</li>";
  15.         ul.innerHTML += "<li>邮箱" + data.user.email + "</li>";
  16.         document.body.appendChild(ul);
  17.         }
  19.         // 2.点击按钮发起一个基于JSONP的跨域请求
  20.         var btn = document.querySelector("button");
  21.         btn.addEventListener(
  22.             "click",
  23.             function () {
  24.                 var script = document.createElement("script");
  25.                 script.src = "http://m.xt520.xyz/1.php?jsonp=handle&id=2";
  26.                 document.head.appendChild(script);
  27.             },
  28.             false
  29.         );
  30.     </script>
  31. </body>

后台部分：

  1. <?php
  2. header('content-type:text/html;charset=utf-8');
  4. $callback = $_GET['jsonp'];
  5. $id = $_GET['id'];
  7. // 模仿接口，根据查询条件返回不同的内容
  8. $users = [
  9.     '{"name":"zhangsan","email":"youku@qq.com"}',
  10.     '{"name":"lisi","email":"yahoo@google"}',
  11.     '{"name":"tina","email":"keep@qq.com"}',
  12. ];
  14. if (array_key_exists(($id-1),$users)) {
  15.     $user = $users[$id-1];
  16. }
  18. $json = '{
  19.     "title":"学生表",
  20.     "user":'.$user.'
  21. }';
  23. echo $callback . '(' . json_encode($json). ')';

效果图：

总结

通过老师两个案例的讲解，我大概了解了跨域请求，能够做什么，它主要用在数据交互，一个页面引用另一个页面，用异步请求获取数据，实现数据的共享。跨域主要说的是AJAX请求无法完成，这个时候就用我们的CORS和JSONP技术来解决这个难题。感觉自己又学会了一个好东西，开心。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：同源策略限制了脚本发起http请求, 但不限制标签属性的跨域请求...., 之前用iframe来解决, 现在可以用jsonp方式来处理, 借助ajax更高效的方式处理跨域
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！