秃破前端面试：跨域实践总结

前端

2024-01-25 04:56:46

跨域的痛：为前端面试探路

跨域，对于前端开发人员来说，可谓是面试中的一大拦路虎。它就像一道无形的鸿沟，阻碍着不同域名的资源进行通信和交互。为了顺利通过面试，掌握跨域解决方案是必不可少的。

揭秘跨域的罪魁祸首：同源策略

同源策略是跨域问题的主要根源。它是一种安全机制，旨在限制不同来源的资源之间的交互，防止恶意攻击和数据泄露。同源策略主要基于以下三个要素进行判断：

协议：请求的协议必须相同。
域名：请求的域名必须相同。
端口：请求的端口必须相同。

只要满足以上三个条件，两个资源就可以进行通信和交互。否则，就会触发跨域错误。

跨域解决方案：解锁面试通关密码

解决跨域问题的方法有很多，常用的解决方案包括：

1. CORS：跨域资源共享

CORS是一种常见的跨域解决方案，它允许不同域名的资源在一定条件下进行通信和交互。CORS通过在HTTP请求头中添加一些特殊的字段来实现跨域，这些字段包括：

Origin：请求的来源域名。
Access-Control-Allow-Origin：服务器允许的来源域名。
Access-Control-Allow-Methods：服务器允许的请求方法。
Access-Control-Allow-Headers：服务器允许的请求头。

2. JSONP：JSON跨域请求

JSONP是一种简单有效的跨域解决方案，它利用<script>标签的跨域特性来实现跨域。JSONP的工作原理是：

客户端向服务器发送一个<script>标签，其中包含一个回调函数。
服务器收到请求后，将数据作为参数传递给回调函数。
客户端解析<script>标签，执行回调函数，并获取数据。

3. WebSocket：双向实时通信

WebSocket是一种双向实时通信协议，它允许客户端和服务器建立一个持久的连接。WebSocket可以通过以下步骤实现跨域：

客户端向服务器发送一个WebSocket连接请求。
服务器接受连接请求，并建立WebSocket连接。
客户端和服务器可以通过WebSocket连接进行双向通信。

4. 代理服务器：跨域的桥梁

代理服务器是一种充当中间人的服务器，它可以将一个域名的请求转发到另一个域名。代理服务器可以通过以下步骤实现跨域：

客户端向代理服务器发送请求。
代理服务器收到请求后，将请求转发到目标服务器。
目标服务器处理请求，并将响应返回给代理服务器。
代理服务器将响应返回给客户端。

实战演练：跨域代码示例

为了帮助大家更好地理解和掌握跨域解决方案，这里提供一些实际的代码示例：

1. CORS示例

// 服务器端代码
app.use(cors({
  origin: ['http://example.com'],
  methods: ['GET', 'POST'],
  headers: ['Content-Type', 'Authorization'],
  maxAge: 3600
}));

// 客户端代码
fetch('http://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer 123456'
  }
})
.then(response => response.json())
.then(data => {
  console.log(data);
});

2. JSONP示例

// 服务器端代码
const callback = req.query.callback;
const data = {
  name: 'John Doe',
  age: 30
};
res.jsonp(`${callback}(${JSON.stringify(data)})`);

// 客户端代码
const script = document.createElement('script');
script.src = `http://example.com/api/data?callback=myCallback`;
document.body.appendChild(script);

function myCallback(data) {
  console.log(data);
}

3. WebSocket示例

// 客户端代码
const socket = new WebSocket('ws://example.com/api/chat');

socket.onopen = function() {
  console.log('WebSocket连接已建立');
};

socket.onmessage = function(event) {
  console.log(event.data);
};

socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

socket.send('Hello, world!');