跳到主要内容

跨域问题

前端跨域（Cross-Origin Resource Sharing，CORS）是指在浏览器环境下，当一个页面的源（origin）与请求的资源的源不同域（协议、域名、端口号任一不同）时，浏览器会阻止页面获取或操作来自其他域的资源，这种安全机制称为同源策略（Same-Origin Policy）。跨域问题是由浏览器的同源策略引起的。

为了解决跨域问题，可以采取以下一些方法：

  1. JSONP（JSON with Padding）：JSONP 是一种利用 <script> 标签的跨域技术，通过动态创建 <script> 标签，并将请求发送到另一个域的服务器上，在服务器端将响应数据包装在一个函数调用中返回，然后在客户端通过定义这个函数来获取数据。JSONP 的缺点是只支持 GET 请求，并且容易受到 XSS 攻击。
  2. CORS（Cross-Origin Resource Sharing）：CORS 是一种官方的跨域解决方案，它通过在响应头中添加特定的 CORS 头部（例如 Access-Control-Allow-Origin）来告知浏览器允许来自其他源的请求。服务器端需要配置相应的 CORS 头部，允许指定的源访问资源。CORS 支持跨域的各种 HTTP 请求方法，并且安全性较高。
  3. 代理服务器：在同域下设置一个代理服务器，前端页面向代理服务器发送请求，由代理服务器转发请求到目标服务器，然后再将响应返回给前端页面。这种方法可以规避浏览器的同源策略，但需要额外的服务器开销。
  4. iframe：使用 <iframe>标签加载来自其他域的页面，通过 postMessage() 方法进行跨窗口通信，来实现跨域数据交换。
  5. WebSocket：WebSocket 协议不受同源策略限制，可以在不同源之间建立双向通信，实现跨域数据交换。

img 标签为什么没有跨域问题​

<img> 标签通常没有跨域问题是因为浏览器对于加载图片的跨域策略有所不同。与其他资源（如 JavaScript、CSS）相比，图片有更宽松的跨域规则。

主要的原因有两点：

  1. 跨域资源共享（CORS）策略的不同：对于像 XMLHttpRequest 和 Fetch API 这样的 JavaScript 请求，浏览器会执行同源策略，即只允许在同源情况下加载资源。但对于 <img>、<script>、<link>、<audio> 和 <video> 等标签，浏览器会执行一种称为 "CORS 不透明" 的策略。这意味着它们不会触发 JavaScript 中的 CORS 检查，因此不会遇到同源策略的限制。
  2. 跨域请求头的限制：像 XMLHttpRequest 和 Fetch API 这样的 JavaScript 请求会发送额外的跨域请求头，如 Origin，浏览器会根据服务器返回的响应头中的 Access-Control-Allow-Origin 进行跨域许可的验证。而 <img> 标签加载图片时，并不会发送额外的跨域请求头，因此不会受到 CORS 的限制。

尽管 <img> 标签没有严格的跨域限制，但在一些情况下，服务器可能会通过设置响应头中的 Content-Security-Policy 来限制图片的加载。此外，某些浏览器可能也会实施额外的安全策略来防止跨域图片的滥用，但这些情况相对较少见。