跨域：前端面试必备知识

导语：

跨域问题是前端面试中的常见考点，它涉及浏览器的同源策略、跨域资源共享 (CORS) 和 JSONP 等概念。掌握这些知识对于前端工程师至关重要，它能让你在面试中脱颖而出，并在实际开发中避免跨域难题。

什么是跨域？

跨域是指浏览器从一个源（协议、主机和端口的组合）向另一个源发起请求的情况。由于浏览器为了安全原因实施了同源策略，因此跨域请求通常会受到限制。

同源策略

同源策略是一个浏览器安全机制，它限制了不同来源之间的交互。同源策略规定，只有来自相同源的脚本才能访问和操作同一来源的文档和资源。

跨域请求的解决方案

为了解决跨域问题，有几种不同的方法：

• 代理： 使用代理服务器作为中介，将跨域请求转发到目标服务器。
• JSONP： 利用浏览器允许跨域请求脚本文件的特性，将数据通过 JSONP 回调函数返回。
• CORS： 允许服务器配置 CORS 响应头，明确允许来自特定源的跨域请求。

JSONP

JSONP（JSON with Padding）是一种跨域技术，它利用浏览器允许跨域请求脚本文件的特性。JSONP 工作原理如下：

1. 客户端发送一个包含回调函数名称的请求。
2. 服务器将数据包装在回调函数中返回。
3. 浏览器执行回调函数，接收数据。

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域技术，它允许服务器配置 CORS 响应头，明确允许来自特定源的跨域请求。CORS 工作原理如下：

1. 客户端发送一个带有 CORS 请求头（如 Origin、Access-Control-Request-Method 等）的请求。
2. 服务器根据 CORS 响应头进行响应，允许或拒绝跨域请求。
3. 浏览器根据 CORS 响应头判断请求是否成功。

实战应用

技术指南：

实现跨域代理：

1. 搭建一个代理服务器，如 Nginx 或 Apache。
2. 在代理服务器上配置转发规则，将跨域请求转发到目标服务器。
3. 在客户端发送请求时，将目标服务器地址替换为代理服务器地址。

示例代码：

// 发送跨域请求
fetch('https://example.com/api')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

// JSONP 跨域请求
function callback(data) {
  // 处理数据
}

const script = document.createElement('script');
script.src = `https://example.com/api?callback=${callback}`;
document.body.appendChild(script);

// CORS 跨域请求
const request = new Request('https://example.com/api', {
  mode: 'cors',
  headers: {
    'Access-Control-Request-Method': 'GET',
    'Access-Control-Request-Headers': 'content-type'
  }
});

fetch(request)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

总结

掌握跨域问题及其解决方案对于前端工程师至关重要。代理、JSONP 和 CORS 是常见的跨域技术，每种技术都有其优缺点。通过对这些技术的深入理解，你可以自信地解决跨域问题，为用户提供无缝的 Web 体验。