当前位置：网站首页 > 技术博客 > 正文

跨国网站浏览器

技术博客 来源： 网络 编辑：小编 发布时间：2025-08-29 16:01:04 浏览量：55



注:

  1. 本文中XHR表示 对象.
  2. CORS表示, 译为跨域资源共享.
  3. 请求头即 Request Headers, 响应头即 Response Headers.

大佬们可以直接看下一章解决方案, 这里会解释得详细一点方便新手入门(谁都曾是萌新嘛), 不了解CORS的来这补补课吧~

 
  
->> 为什么浏览器要有跨域限制
 
  
举个例子:
 
  
 
  
如果我在Segmentfault官网的Console访问我的博客园首页, 就会触发XHR跨域限制, 禁止读取返回内容.
 
  
 
  
像React也建议你验证CDN的请求头属性, 避免使用出现跨域限制问题.
 
  
->> 浏览器对请求的详细划分方法: 简单请求和复杂请求
 
  
     
   
  1. 请求方法是 , , 之一.
    2.  
   
  2. 人为设置的请求头不超过以下属性: , , .
    3.  
   
  3.  属性值是 , , 之一.
    4.  
   
  4. 请求中的任意 对象均没有注册任何事件监听器; 对象可以使用 属性访问.
    5.  
   
  5. 请求中没有使用 对象.
    6.  
  
 
  
其中前3点比较常用. 如果请求不满足以上5个条件的任意之一, 则是复杂请求.
 
  
浏览器区分 和 是为了兼容表单(form), 因为历史上表单一直可以发出跨域请求.
 
  
->> XHR请求在浏览器里是如何被发出去的? 浏览器对简单请求和复杂请求的不同处理方式
 
  
 
   
这里我觉得阮一峰的文章已经写得很好了(在文末有链接), 所以, 如有雷同(不对, 就是雷同)... 不要觉得我是在抄袭, 只是按照他的合法借鉴哈.
 
  
 
  
     
   
  1. 浏览器对简单请求的处理方式!
     如果一个XHR满足简单请求的所有判定, 那它会被这样发出去:
     
     

    2.  
   
  2. 浏览器对复杂请求的处理方式! 
     
    3.  
  
 
  
->> 案例: 解决一个博客音乐播放器的跨域问题
 
  
这些《神奇》的方法也就是下一章会详细介绍的内容啦~ 
 
  
     
   
  1. 使用 实现
     标签可以将跨域内容嵌入你的网页, 比如在博客中添加一个Bilibili视频 或者 Codepen Demo的 .
     不过 有两个缺点:

     
        
       
         
    1. 很多服务器会直接拒绝跨域 请求,
      2.  
         
    2. 跨域访问 中的内容会遭到限制qwq.
       放几张图体会一下:

      3.  
        
     
     
    如果在阮一峰的Blog中插入 iframe(cnblogs博文), 会被拒绝qwq...
     
     
    而如果在站内插入iframe则没有问题, 看来博客园为了安全考虑目前关闭了跨域请求.
     
     
    而Bilibili就比较开放了, 目前可以插入iframe.
     
     
    不过如果你想通过iframe读取或者篡改Bilibili网页的内容也是不可以的啦~
     
    所以这终究只是一个向用户"展示内容"的方法而已, 限制很多, 如果要读取/篡改内容, 还是得同源才行~
     



    2.  
   
  2. 使用CORS方法(跨域资源共享)
     这个方法也就是第一章中介绍的, 很详细了. 不用再重复一遍啦.
     
    但是这种方法也是受到对方服务器的种种限制, 不能为所欲为qwq...
     

    3.  
   
  3. 搞一个浏览器插件配合(终极大招, 直接无视跨域限制)
     嘿嘿嘿! 没想到吧! 竟然还有这种方法?!
     网上这方面的文章一般都不会想到有这种神奇也是非常强大的方法, 不过这也是非常实用的.
     如果要我来, 很可能会采用这种方法, 可以不用后端支持进行跨域!
     如果你的网站面向的对象主要是爱好激活成功教程的极客/有探索精神的玩家, 可以向他们推荐你的Chrome插件, 或者是一段油猴脚本.
     比如让用户简单的copy&paste添加一段你的油猴(TemperMonkey)脚本, 就可以实现跨域请求啦!
     (现在油猴/Chrome插件在极客/开发者手里也已经很普及了吧~, 想想你装了多少插件...
     (当然一个都没装的勿喷!






     
    不如先学习一下别人是怎么玩的. 我们随便打开一个别人开发的Chrome插件的文件夹(我打开的是Tempermonkey), 是这幅景象:
     
     
    其中有一个 文件, 和你的插件支不支持跨域密切相关, 比如油猴的长这样:
     
     
    这个属性设置了插件有哪些权限, 比如可以随意访问哪些网站.
     
    而在用户眼中就是这幅景象:
     
     
    关于Chrome插件配合网站实现跨域的文档, 可以参考这篇 https://wizardforcel.gitbooks.io/chrome-doc/content/23.html, 总结得很完整了.
     
     
    好了这个方法是真的tql.
     













    4.  
   
  4. 配合客户端本地代理VPN(终极大招)
     看完第三个方法, 我觉得其他的都要退下了, 毕竟第3个方法应该是最简单的了.
     第四个原理差不多, 不过开发起来是真的麻烦啊.
     要让用户装一个系统应用, 本地VPN, 就像Charles, Fiddler这样.
     然后在本地自动修改 Referer 和 Origin 等请求头, 假装一个正常的用户请求.
     总之不是一个优秀的解决方案吧.




     









    5.  
   
  5. 配合后端(终极大招)
     本文着重纯前端开发, 我也不太懂后端(基本的php除外, 用来建博客要用到)
     这个方法也是很实用的, 但是不详细介绍了.
     就是针对不涉及用户在浏览器中cookie的情况, 通过后端语言(如Java)正常请求来获取资源.
     再返回到前端, 请求一个本站资源(其实转自对方站).



     







    6.  
   
  6. JSONP方法
     对于 标签的资源, 浏览器是没有跨域限制的! (对方按照referer/origin属性不返回数据的情况除外)
     
    比如网上就有这样的实现:
     
     
    嗯, 就是这样用的, 很简单获取Script内容, 不过也只支持Script qwq...
     

    7.  
   
  7. WebSocket实现
     WebSocket是HTML5的一个特性, 可以让浏览器化被动为主动发送内容, 适合实时直播等场景(比如字节的掘金直播就用到了这种方法)
     
     
    WebSocket其实虽然有用(本来就没有CORS的跨域限制), 但其实也没有办法获取HTTP资源QAQ.
     
    所以这个方法也不推荐吧!
     

    8.  
   
  8. window.postMessage() 方法
     这个方法可以安全地实现跨源通信!
     
    不了解这个方法, 可以去这里补补课~ ->> https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
     
    在《HTML5CSS3权威指南》中也有介绍, 但是在实战中这个方法使用也比较少哈~
     
    当然正因为它可以 "安全地" 实现跨源通信, 所以这个通信方法也是需要对方服务器认可的. 所以如果要做不正经的事(对方不允许的情况下强行获取资源)也没有用啊...
     

    9.  
   
  9. 使用"允许跨域"方法打开浏览器
     既然是浏览器搞的限制, 能不能关闭这个限制呢?
     是可以的!

     
    就以这种方法打开(Windows, xxx是你的data目录):
     
     
    Mac也可以! 也是一样的.
     
     
    就是这样, 不过要重启Chrome才行, 用户可能不愿意, 所以还是插件这个方法我最推荐.
     



    10.  
  
 
  
附录 - CORS请求与JSONP的比较
 
  
CORS与JSONP的使用目的相同, 但是比JSONP更强大.
 
  
JSONP只支持GET请求, CORS支持所有类型的HTTP请求. JSONP的优势在于支持老式浏览器, 以及可以向不支持CORS的网站请求数据.
 
  
 
   
MDN中文文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
 
   
MDN 英文文档 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 
   
阮一峰 https://www.ruanyifeng.com/blog/2016/04/cors.html
 
   
秋风的笔记 https://segmentfault.com/a/98875
 
   
思否 - 安静de沉淀 https://segmentfault.com/a/45364
 
   
掘金 - 小铭子 https://juejin.cn/post/
 
   
掘金 - JackySummer https://juejin.cn/post/
 
   
Chrome Developers https://developer.chrome.com/docs/extensions/mv3/xhr/
 
   
Html5Rocks https://www.html5rocks.com/en/tutorials/cors//
 
   
博客园 - 小火柴的蓝色理想 https://www.cnblogs.com/xiaohuochai/p/6036475.html
 
   
知乎 - 单纯前端能否解决跨域问题? https://www.zhihu.com/question/
 
   
MDN - XHR介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
 
   
MDN - XHR介绍(英文) https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
 
   
MDN - Access-Control-Allow-Origin 属性介绍 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
 
   
MDN - Access-Control-Allow-Origin 属性介绍(英文) https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
 
   
StackOverflow - How does Access-Control-Allow-Origin header work? https://stackoverflow.com/questions//how-does-access-control-allow-origin-header-work
 
   
StackOverflow - CORS with XMLHttpRequest not working https://stackoverflow.com/questions//cors-with-xmlhttprequest-not-working
 
   
W3 - CORS Enabled https://www.w3.org/wiki/CORS_Enabled
 
  
 
  
 
   
2021.8.23 发布V1.0
 
  
 
  

                            


                            

                                
  • 
                                    
                                    上一篇：
                                    
                                    srvctl start asm
                                    
                                    
                                
    • 
                                
  • 
                                    
                                    下一篇：
                                    
                                    软件测试面试问题
                                    
                                    
                                
    • 
                            
    

                            
                            
    
                                
    
                                    版权声明：
    
                                    本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

    
                                    
    本文网址：https://www.mushiming.com/mjsbk/11724.html
    
                                
    
                            
    
                            
                        
    
                        
    
                            
    

                            
    
                        
    

                        
                        
                        
    
                            
    相关文章：
    
                            
                            
                        
                        
  • 
                                srvctl start asm2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                so文件怎么调用2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                usb协议分析仪 力科2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                tftp服务器搭建2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                python二级报考20242025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                软件测试面试问题2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                不背单词网址2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                dds 消息中间件2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                win11的设备和打印机在哪2025-08-29 16:01:04
                        
    • 
                        
                        
  • 
                                测网络连通性用什么命令2025-08-29 16:01:04
                        
    •