什么是跨域，如何解决？

定义

跨域指的是在不同的源（protocol、domain、port）之间进行HTTP请求。由于安全原因，浏览器会限制跨域请求，这意味着一个网页无法直接访问另一个域名下的资源。这种机制被称为同源策略（Same-Origin Policy）。

常见跨域场景

1. AJAX请求：使用XMLHttpRequest或Fetch API从另一个域获取数据。
2. 嵌入iframe：在一个网页中嵌入另一个域的内容。
3. Web字体：从不同源加载字体文件。

跨域解决方案

1. CORS（跨域资源共享）：

   • 服务器通过设置HTTP头部来允许特定源访问其资源。
   • 例如，服务器可以在响应中添加Access-Control-Allow-Origin头：

   Access-Control-Allow-Origin: https://example.com
   

   这样，只有https://example.com可以访问该资源。

2. JSONP：

   • 通过在页面中动态创建<script>标签，使用GET请求从其他域获取数据。由于<script>标签不受同源策略限制。
   • 示例：

   <script src="https://api.example.com/data?callback=myCallback"></script>
   <script>
       function myCallback(data) {
           console.log(data);
       }
   </script>
   

3. 代理服务器：

   • 通过设置代理服务器来间接访问跨域资源。前端请求代理服务器，代理服务器再请求目标资源。
   • 例如，使用Node.js的Express设置代理：

   app.get('/api', (req, res) => {
       const targetUrl = 'https://api.example.com/data';
       request(targetUrl).pipe(res);
   });
   

4. 使用iframe和postMessage：

   • 在不同域的网页之间传递信息。主页面和iframe通过window.postMessage()方法进行通信。

   // 主页面
   const iframe = document.getElementById('myIframe');
   iframe.contentWindow.postMessage('Hello', 'https://other-domain.com');
   
   // iframe页面
   window.addEventListener('message', (event) => {
       if (event.origin === 'https://your-domain.com') {
           console.log(event.data);
       }
   });
   

总结

跨域是Web开发中的一个重要概念，理解和解决跨域问题对于实现复杂的Web应用至关重要。通过CORS、JSONP、代理服务器和postMessage等方法，可以有效地处理跨域请求，确保应用能够安全地访问所需的资源。