前后端分离架构下的跨域问题

在现代Web开发中，前后端分离已成为主流架构模式。这种模式将前端与后端的开发职责明确分离，前端负责用户界面和用户体验，后端负责业务逻辑和数据处理。然而，前后端分离也带来了跨域问题。由于前后端通常部署在不同的域名或端口下，浏览器出于安全考虑，会限制跨域的HTTP请求，这给前后端的数据交互带来了挑战。

什么是跨域？

跨域（CORS，Cross-Origin Resource Sharing）是指浏览器在当前域下访问不同域的资源时，受到同源策略的限制。同源策略要求协议、域名和端口都相同，否则就属于跨域。例如，前端部署在 http://localhost:3000，后端API部署在 http://api.example.com:5000，这就属于跨域请求。

常见跨域解决方案

1. CORS（跨域资源共享）

CORS 是目前最常用的跨域解决方案。它通过在服务器端设置特定的HTTP头部，允许浏览器进行跨域请求。

服务器端配置

以Node.js为例，使用Express框架可以轻松配置CORS：

前后端分离跨域解决方案：实现高效安全的跨域请求

const express = require('express');
const cors = require('cors');
const app = express();// 配置CORS
app.use(cors({origin: 'http://localhost:3000', // 前端地址methods: ['GET', 'POST', 'PUT', 'DELETE'],allowedHeaders: ['Content-Type', 'Authorization']
}));app.get('/api/data', (req, res) => {res.json({ message: 'Hello from server!' });
});app.listen(5000, () => {console.log('Server is running on port 5000');
});

客户端请求

前端可以使用 fetch 或 axios 进行跨域请求：

fetch('http://api.example.com:5000/api/data', {method: 'GET',headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2. JSONP（JSON with Padding）

JSONP 是一种早期的跨域解决方案，适用于GET请求。它利用

`JSONP Example`

3. 代理服务器

通过搭建一个代理服务器，将前端请求转发到后端API，从而避免跨域问题。

配置Nginx作为代理

server {listen 80;server_name localhost;location /api/ {proxy_pass http://api.example.com:5000/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}location / {root /path/to/frontend;try_files $uri $uri/ /index.html;}
}

前端请求

前端可以像同源请求一样发送请求：

fetch('/api/data', {method: 'GET',headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));