Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS相关知识：跨域请求(CORS/JSONP)
Blogger Information
Blog 145
fans 7
comment 7
visits 164681
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
JS相关知识：跨域请求(CORS/JSONP)
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
776 people have browsed it

代码练习:

1.CORS跨域请求:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <button>跨域请求-CORS</button>
  10.     <div class="body"></div>
  11.   </body>
  12.   <script>
  13.     var btn = document.querySelector("button");
  14.     btn.addEventListener(
  15.       "click",
  16.       function () {
  17.         // 1. 创建Ajax对象
  18.         var xhr = new XMLHttpRequest();
  20.         // 2. 监听请求
  21.         xhr.onreadystatechange = function () {
  22.           if (xhr.readyState === 4 && xhr.status === 200) {
  23.             console.log(xhr.responseText);
  24.             document.querySelector(".body").innerHTML = xhr.responseText;
  25.           }
  26.         };
  28.         // 3. 初始化请求参数
  29.         xhr.open("GET", "http://php.edu/login_regist/login.php", true);
  31.         // 4. 发送请求
  32.         xhr.send(null);
  33.       },
  34.       false
  35.     );
  36.   </script>
  37. </html>

服务器端代码:

  1. <?php
  2. header("Access-Control-Allow-Origin:http://js.edu");
  3. if(isset($_COOKIE['user'])){
  4.     // echo 'OK';
  5.     // exit('<script>alert("登陆成功！");location.href="index.php";</script>');
  6.     exit('<script>alert("已经登陆，请勿重复等登陆！");location.href="index.php";</script>');
  7. }
  10. ?>
  11. <!DOCTYPE html>
  12. <html lang="en">
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17.     <title>用户注册</title>
  18.     <style>
  19.     * {
  20.         margin: 0;
  21.         padding: 0;
  22.     }
  24.     h2 {
  25.         /* display: block; */
  26.         width: 350px;
  27.         margin: 0 auto;
  28.         text-align: center;
  29.         padding-top: 10px;
  30.         box-sizing: border-box;
  32.     }
  35.     form {
  36.         margin: 10px auto;
  37.         width: 350px;
  38.         height: 250px;
  39.         background-color: #5384e8;
  40.         display: flex;
  41.         flex-flow: column nowrap;
  42.         justify-content: space-evenly;
  43.         align-content: center;
  44.         align-items: center;
  45.         font-size: 1.2rem;
  47.     }
  49.     form:hover {
  50.         box-shadow: 0 0 5px #626262;
  51.     }
  53.     form>.button {
  54.         width: 280px;
  55.         display: flex;
  56.         justify-content: space-evenly;
  57.     }
  59.     form>.button>input {
  60.         width: 100px;
  61.         height: 30px;
  62.         background-color: #00bb00;
  63.         border: none;
  64.         border-radius: 15px;
  65.     }
  67.     form>.button>input:hover {
  68.         background-color: red;
  69.         color: white;
  70.     }
  72.     a {
  73.         color: white;
  74.         text-decoration: none;
  75.     }
  76.     </style>
  77. </head>
  79. <body>
  80.     <h2>用户注册</h2>
  81.     <form action="handle.php?action=select" method="POST">
  82.         <!-- <fieldset> -->
  83.         <!-- <legend align="center">用户注册</legend> -->
  84.         <div>
  85.             <label for="username">账户：</label>
  86.             <input type="email" required name="username" id="username" placeholder="example@163.com">
  87.         </div>
  88.         <div>
  89.             <label for="p2">密码：</label>
  90.             <input type="password" required name="p2" id="p2" placeholder="不少于六位">
  91.         </div>
  92.         <!-- </fieldset> -->
  93.         <div class="button">
  94.             <input type="submit" value="登陆">
  95.             <input type="reset" value="重置">
  97.         </div>
  98.         <div>
  99.             <a href="regist.php">没有账号,点击此处注册!</a>
  100.         </div>
  101.     </form>
  102. </body>
  104. </html>

运行效果:

2.JSONP代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <button>跨域请求JSONP</button>
  10.   </body>
  11.   <script>
  12.     function output() {
  13.       var h1 = document.createElement("h2");
  14.       h1.innerHTML = "测试成功";
  15.       document.body.appendChild(h1);
  16.     }
  17.     var btn = document.querySelector("button");
  18.     btn.onclick = function () {
  19.       var script = document.createElement("script");
  20.       script.src = "http://php.edu/cors/demo.php";
  21.       document.head.appendChild(script);
  22.     };
  23.   </script>
  24. </html>

服务器端代码:

  1. <?php
  3. echo 'output()';

生成结果图

总结

1.了解跨域请求CORS和CSRF跨站请求伪造
2.同源策略:是要求协议 域名 端口完全相同,这是一种安全机制,禁止浏览器通过脚本发起跨区域请求例如XMLHtppRequest,但允许通过html标签跨域请求;
3.CORS脚本跨域请求的目标允许访问设置:header('Access-Control-Allow-Origin:$url');$url有三种:网站名(协议域名端口)|*(允许任何跨域请求)|true(带cookie的跨域请求)
4.JSONP跨域请求:通过脚本生成一个带有src的script标签来访问跨域目标文件,目标文件返回信息,处理生成新的脚本(script)代码并执行生成新的页面内容;(一般是提前写一个函数,目标文件返回函数名调用函数,执行生成新的内容);

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：跨域请求, 听上去高大上, 其实非常的简单不是吗?
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