跨域
想要了解跨域,首要要了解源
什么是源,源等于协议加域名加端口号
只有这三个都相同,才是同源,反之则是非同源。
比如下面这四个里,只有第4个是同源
而浏览器给服务器发送请求时,他们的源一样,就是同源请求,反之就是非同源请求,非同源请求又称为跨域。
当你是跨域时,浏览器为了确保资源安全,会对跨域的访问资源做出一些限制,也就是浏览器的同源策略。
这是W3C上对同源策略的说明:https://www.w3.org/Security/wiki/Same_Origin_Policy
浏览器会对跨域做出哪些限制?
例如:源a和源b,它们是非同源的,则浏览器会有如下限制:
1. DOM访问限制:源a的脚本不能读取和操作源b的DOM。
页面1
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. <h1>我是页面1</h1> 10. <button onclick="showDOM()">获取页面2的DOM</button> 11. <br> 12. <iframe id="framePage" src="./demo.html"></iframe> 13. <!-- <iframe id="framePage" src="https://www.baidu.com"></iframe> --> 14. 15. <script type="text/javascript" > 16. function showDOM(){ 17. const framePage = document.getElementById('framePage') 18. console.log(framePage.contentWindow.document.body) //同源的可以获取,非同源的无法获取 19. } 20. </script> 21. </body> 22. </html>
页面2
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. <h2>我是页面2</h2> 10. </body> 11. </html>
页面是这样的
点击获取
换一个不同源的页面
1. <body> 2. <h1>我是页面1</h1> 3. <button onclick="showDOM()">获取页面2的DOM</button> 4. <br> 5. <!-- <iframe id="framePage" src="./demo.html"></iframe> --> 6. <iframe id="framePage" src="https://www.bilibili.com"></iframe> 7. 8. <script type="text/javascript"> 9. function showDOM() { 10. const framePage = document.getElementById('framePage') 11. console.log(framePage.contentWindow.document.body) //同源的可以获取,非同源的无法获取 12. } 13. </script> 14. </body>
获取DOM
获取不到
2. 第二个限制,源a不能访问源b的cookie
3. <!DOCTYPE html> 4. <html lang="en"> 5. 6. <head> 7. <meta charset="UTF-8"> 8. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9. <title>Document</title> 10. </head> 11. 12. <body> 13. <h1>我是页面1</h1> 14. <button