登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 157944
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS相关知识:跨域请求(CORS/JSONP)
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
745人浏览过

代码练习:

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();
  19. // 2. 监听请求
  20. xhr.onreadystatechange = function () {
  21. if (xhr.readyState === 4 && xhr.status === 200) {
  22. console.log(xhr.responseText);
  23. document.querySelector(".body").innerHTML = xhr.responseText;
  24. }
  25. };
  26. // 3. 初始化请求参数
  27. xhr.open("GET", "http://php.edu/login_regist/login.php", true);
  28. // 4. 发送请求
  29. xhr.send(null);
  30. },
  31. false
  32. );
  33. </script>
  34. </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. }
  8. ?>
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <title>用户注册</title>
  15. <style>
  16. * {
  17. margin: 0;
  18. padding: 0;
  19. }
  20. h2 {
  21. /* display: block; */
  22. width: 350px;
  23. margin: 0 auto;
  24. text-align: center;
  25. padding-top: 10px;
  26. box-sizing: border-box;
  27. }
  28. form {
  29. margin: 10px auto;
  30. width: 350px;
  31. height: 250px;
  32. background-color: #5384e8;
  33. display: flex;
  34. flex-flow: column nowrap;
  35. justify-content: space-evenly;
  36. align-content: center;
  37. align-items: center;
  38. font-size: 1.2rem;
  39. }
  40. form:hover {
  41. box-shadow: 0 0 5px #626262;
  42. }
  43. form>.button {
  44. width: 280px;
  45. display: flex;
  46. justify-content: space-evenly;
  47. }
  48. form>.button>input {
  49. width: 100px;
  50. height: 30px;
  51. background-color: #00bb00;
  52. border: none;
  53. border-radius: 15px;
  54. }
  55. form>.button>input:hover {
  56. background-color: red;
  57. color: white;
  58. }
  59. a {
  60. color: white;
  61. text-decoration: none;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <h2>用户注册</h2>
  67. <form action="handle.php?action=select" method="POST">
  68. <!-- <fieldset> -->
  69. <!-- <legend align="center">用户注册</legend> -->
  70. <div>
  71. <label for="username">账户:</label>
  72. <input type="email" required name="username" id="username" placeholder="example@163.com">
  73. </div>
  74. <div>
  75. <label for="p2">密码:</label>
  76. <input type="password" required name="p2" id="p2" placeholder="不少于六位">
  77. </div>
  78. <!-- </fieldset> -->
  79. <div class="button">
  80. <input type="submit" value="登陆">
  81. <input type="reset" value="重置">
  82. </div>
  83. <div>
  84. <a href="regist.php">没有账号,点击此处注册!</a>
  85. </div>
  86. </form>
  87. </body>
  88. </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
  2. echo 'output()';

生成结果图

总结

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

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:跨域请求, 听上去高大上, 其实非常的简单不是吗?
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学