同源策略和CORS (跨域资源共享)

同源策略（Same-Origin Policy）

基础概念

同源策略是一种安全机制，用于限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。只有当协议、域名和端口都相同时，才认为是同源。

优势

• 安全性：防止恶意网站读取或修改另一个网站的数据。
• 隐私保护：保护用户数据不被未经授权的第三方访问。

应用场景

• 浏览器中的JavaScript脚本通常受到同源策略的限制。
• 网页中的AJAX请求默认只能访问同源的资源。

遇到的问题及解决方法

问题：前端页面无法访问不同源的后端API。 原因：同源策略阻止了跨域请求。 解决方法：

• 使用CORS（跨域资源共享）。
• 使用JSONP（仅限于GET请求）。
• 设置服务器端的代理。

CORS（跨域资源共享）

基础概念

CORS是一种机制，允许服务器声明哪些源可以通过浏览器访问其资源。通过在服务器端设置特定的HTTP头，可以允许跨域请求。

类型

• 简单请求：使用GET、POST、HEAD方法，且HTTP头信息限制在特定范围内。
• 预检请求：使用PUT、DELETE等非简单方法，或者使用了不在简单请求范围内的HTTP头信息。

应用场景

• 前端页面需要访问不同域的后端API。
• 跨域资源共享的场景，如API服务、文件上传等。

遇到的问题及解决方法

问题：浏览器拒绝跨域请求。 原因：服务器未正确设置CORS头信息。 解决方法：

• 在服务器端设置Access-Control-Allow-Origin头，允许特定的源访问资源。
• 设置Access-Control-Allow-Methods头，允许特定的HTTP方法。
• 设置Access-Control-Allow-Headers头，允许特定的自定义头信息。

示例代码（Node.js + Express）

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

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

参考链接

• MDN Web Docs - CORS
• Express.js - CORS Middleware

通过以上解释和示例代码，你应该能够理解同源策略和CORS的基本概念、优势、应用场景以及如何解决相关问题。