【个人笔记】跨域问题

        跨域问题源于浏览器实施的一种安全策略,称为“同源策略”(Same-origin policy)。同源策略限制了一个文档或脚本只能读取或修改来自同一源(origin)的文档或脚本所加载的内容。这里的“源”由三个部分组成:协议(http, https等)、域名(example.com, sub.example.com等)和端口号(80, 443等)。只要这三个部分中有任何一个不同,就被视为不同的源。

同源策略的目的

        同源策略的主要目的是为了保护用户的信息安全,防止恶意网站通过脚本获取其他网站的敏感数据,如Cookie、LocalStorage中的信息等。如果没有同源策略,任何网站都可以读取其他网站的这些信息,这将导致严重的隐私泄露和安全问题。

跨域问题的发生

        当一个网站的脚本尝试访问另一个来源的资源时,浏览器就会阻止这个请求,除非目标服务器明确允许跨域访问。例如,如果一个网站的JavaScript脚本尝试通过AJAX请求从另一个域名获取数据,而那个域名没有设置适当的跨域响应头,那么这个请求就会失败,因为违反了同源策略。

解决跨域的方法

        有多种方法可以解决跨域问题,下面是一些常用的技术:

  1. JSONP (JSON with Padding)

    • 利用<script>标签的src属性不受同源策略限制的特点。
    • 服务器需要将数据包装在一个回调函数中返回,客户端定义这个回调函数以处理数据。
  2. CORS (Cross-Origin Resource Sharing)

    • 服务器需要在响应头中添加特定的CORS头,比如Access-Control-Allow-Origin来指定允许哪些源访问其资源。
    • 支持更复杂的情况,如预检请求(preflight requests),可以设置Access-Control-Allow-MethodsAccess-Control-Allow-Headers
  3. PostMessage

    • 使用HTML5的window.postMessage()方法可以在不同源的窗口之间传递消息。
    • 这个方法可以用于跨域的通信,但通常用于子窗口或框架与父窗口之间的通信。
  4. WebSocket

    • WebSocket协议不受同源策略的限制,可以建立全双工的通信通道,适用于实时应用。
  5. Node.js 中间件代理

    • 在本地运行一个Node.js服务器作为中间代理,所有跨域请求先发送给这个服务器,再由它转发给实际的目标服务器。
  6. Nginx 反向代理

    • 使用Nginx作为反向代理服务器,可以配置它来处理跨域请求,使得前端请求看起来像是来自同一源。
  7. window.name + iframe

    • 利用window.name属性和<iframe>标签进行跨域数据传输,适用于不需要实时更新的场景。
  8. location.hash + iframe

    • 类似于window.name + iframe,但是使用location.hash进行数据传输。
  9. document.domain + iframe

    • 当两个窗口的域名是子域关系时,可以通过设置document.domain为相同的父域来绕过同源策略。
  10. Server-Side Proxy

    • 在服务器端设置代理,让所有的请求都经过服务器端处理,避免前端直接跨域请求。

        每种方法都有其适用场景和局限性,选择哪种方法取决于具体的应用需求、安全考虑和开发环境。在现代Web开发中,CORS是最常用且最灵活的解决方案之一。

相关推荐

  1. 个人笔记问题

    2024-07-11 02:14:01       7 阅读
  2. 问题+解决express

    2024-07-11 02:14:01       18 阅读
  3. 问题浅析

    2024-07-11 02:14:01       40 阅读
  4. 问题总结

    2024-07-11 02:14:01       30 阅读
  5. 解决问题

    2024-07-11 02:14:01       27 阅读
  6. 问题CORS

    2024-07-11 02:14:01       18 阅读
  7. hyperf问题

    2024-07-11 02:14:01       19 阅读
  8. 解决问题

    2024-07-11 02:14:01       13 阅读

最近更新

  1. DP学习——中介者模式

    2024-07-11 02:14:01       0 阅读
  2. 交换机(Switches)和桥(Bridges)的区别

    2024-07-11 02:14:01       0 阅读
  3. 测试面试宝典(二十一)—— get和post的区别

    2024-07-11 02:14:01       0 阅读
  4. ESP8266AT指令查看有哪些指令可用(3)

    2024-07-11 02:14:01       0 阅读

热门阅读

  1. webpack 打包配置

    2024-07-11 02:14:01       5 阅读
  2. 人类历史时间轴

    2024-07-11 02:14:01       8 阅读
  3. 使用Python自动化收集和处理视频资源的教程

    2024-07-11 02:14:01       7 阅读
  4. 参数式确定的函数的导数公式及其推导过程

    2024-07-11 02:14:01       8 阅读
  5. 无题:天选之子?

    2024-07-11 02:14:01       6 阅读