简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端 - JS - 跨域请求
Blogger Information
Blog 33
fans 0
comment 0
visits 27660
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 - 跨域请求
郴
Original
743 people have browsed it

前端 - JS - 跨域请求

一、术语

  • 同源策略：同源策略是一种安全机制。浏览器禁止通过脚本发起跨域请求，如XMLhttpRequest，多个页面的协议、域名和端口完全相同，则认为他们遵循了同源策略

  • CSRF：跨站请求伪造。攻击者盗用用户身份，以用户的名义发送恶意请求

  • CORS：跨域资源共享。用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源

二、进行跨站请求

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.     <script>
  10.         var xhr = new XMLHttpRequest();
  11.         xhr.onreadystatechange = function() {
  12.             if (xhr.readyState === 4 && xhr.status === 200) {
  13.                 console.log(xhr.responseText);
  14.             }
  15.         };
  16.         xhr.open("GET", "http://test2.com/handle.php", true);
  17.         xhr.send(null);
  18.     </script>
  19. </body>
  20. </html>
  1. <?php
  2. header("Access-Control-Allow-Origin: http://test1.com");
  3. echo 'hello';


2. JSONP：通过<script>标签的src属性实现

  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. <script>
  10.     function getData(data)
  11.     {
  12.         console.log(data);
  13.     }
  14. </script>
  15. <script src="http://test2.com/handle.php?action=getData"></script>
  16. </body>
  17. </html>
  1. //获取回调函数名
  2. $fname = $_GET ['action'];
  3. //json数据
  4. $data = '["小明", "男", 18]';
  5. //调用回调函数，输出jsonp格式的数据
  6. echo $fname . "($data)";

四、课程总结

  • 今天学习了 JavaScript 的跨域，通过上课认真听讲和认真完成老师布置的作业，使得我对 跨域请求 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了跨域请求的特点以及它的基本语法。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！