面试官:请你说出三种解决跨域的方法

# 面试官：请你说出三种解决跨域的方法

**引言**

在Web开发领域，跨域问题一直是前端工程师需要面对的挑战之一。面试中，当被问到“请说出三种解决跨域的方法”时，不仅考验着开发者对浏览器同源策略的理解深度，也反映了其实际项目中的问题解决能力。本文将深入解析JSONP、CORS和反向代理这三种常见的跨域解决方案，并通过实例代码让读者更加直观地理解其实现原理。

## **一、JSONP（JSON with Padding）**

### 1. JSONP原理与实现

JSONP利用了 `<script>` 标签不受同源策略限制的特点，通过动态创建`<script>`标签向服务器请求数据。服务端返回一个JavaScript函数调用，参数即为需要传递的数据。

```html

<!-- HTML -->

<script>

function handleResponse(data) {

console.log('Received data:', data);

}

</script>

<script src="https://api.example.com/data?callback=handleResponse"></script>

```

- 服务器收到`callback=handleResponse`请求后，会拼接一个调用此函数并传入数据的字符串返回给客户端：

```javascript

handleResponse({"key": "value"});

```

### 2. JSONP优缺点

- **优点**：简单易用，兼容性好，无需服务器额外配置。

- **缺点**：仅支持GET请求；安全性较低，存在注入风险；不适用于非脚本资源如CSS、图片等。

## **二、CORS（Cross-Origin Resource Sharing）**

### 1. CORS原理与实现

CORS是一种由W3C标准定义的现代跨域资源共享机制，允许服务器明确声明哪些域名可以访问资源。

```javascript

// 前端发起CORS请求示例

fetch('https://api.example.com/data', { method: 'GET' })

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

```

- 服务器需要设置响应头允许特定来源访问：

```http

HTTP/1.1 200 OK

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

Content-Type: application/json

{"key": "value"}

```

### 2. CORS优缺点及配置方式

- **优点**：支持所有HTTP方法，安全性较高，可自定义多种CORS策略。

- **缺点**：需服务器端配合配置，旧版IE浏览器可能不支持。

#### CORS配置示例（Node.js + Express）

```javascript

const express = require('express');

const app = express();

app.use((req, res, next) => {

res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的方法

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头

if (req.method === 'OPTIONS') {

res.send(204); // 处理预检请求（Preflight Request）

} else {

next();

}

});

app.get('/data', (req, res) => {

res.json({ key: 'value' });

});

app.listen(3000, () => console.log('Server is running on port 3000'));

```

## **三、反向代理**

### 1. 反向代理原理与实现

反向代理是通过服务器端配置，将对外公开的服务地址指向内部不同的服务地址，从而规避浏览器的同源策略检查。

例如，在Nginx中配置反向代理：

```nginx

server {

listen 80;

server_name client.example.com;

location /api {

proxy_pass http://api.example.com; // 将/api路径下的请求转发至目标服务器

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

}

```

### 2. 反向代理优缺点

- **优点**：灵活性高，可以在服务器端统一处理安全性和权限验证等问题；对前端透明，无需修改前端代码。

- **缺点**：增加了一层网络通信，性能有一定损耗；需服务器端具备配置反向代理的能力。

总结：

在Web开发中，应对跨域问题有多种解决方案，每种方案都有其适用场景和优劣之处。开发者应根据实际需求选择最合适的跨域策略，同时保持对新技术的关注，以适应不断变化的安全规范和最佳实践。