跳到主要内容

HTML 跨域资源共享

介绍​

跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一种浏览器机制，它允许网页从不同的域（即跨域）请求资源。在默认情况下，浏览器会阻止跨域请求，以防止恶意网站访问其他域的资源。CORS通过一组HTTP头部字段来实现跨域请求的授权和控制。

为什么需要CORS？​

假设你正在开发一个前端应用，需要从另一个域名的API获取数据。由于浏览器的同源策略（Same-Origin Policy），这种跨域请求会被阻止。CORS提供了一种安全的方式，允许服务器明确指定哪些外部域可以访问其资源。

CORS的工作原理​

CORS通过在HTTP请求和响应中添加特定的头部字段来实现跨域请求的授权。以下是一个典型的CORS请求流程：

  1. 浏览器发送预检请求（Preflight Request）：对于某些类型的跨域请求（如带有自定义头部的请求），浏览器会先发送一个OPTIONS请求，询问服务器是否允许该跨域请求。
  2. 服务器响应预检请求：服务器通过响应头部字段（如Access-Control-Allow-Origin）来指示是否允许该跨域请求。
  3. 浏览器发送实际请求：如果预检请求通过，浏览器会发送实际的请求。
  4. 服务器响应实际请求：服务器返回请求的资源，并再次通过响应头部字段确认跨域请求的授权。

代码示例​

以下是一个简单的CORS请求示例：

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

在这个示例中，浏览器会向https://api.example.com/data发送一个跨域请求。如果服务器允许该请求，浏览器将成功获取数据。

服务器端CORS配置​

服务器端需要配置CORS头部字段以允许跨域请求。以下是一个Node.js Express服务器的CORS配置示例：

javascript
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'https://your-frontend-app.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

app.get('/data', (req, res) => {
  res.json({ message: 'This is a CORS-enabled response' });
});

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

在这个示例中，服务器允许来自https://your-frontend-app.com的跨域请求，并且只允许GET和POST方法。

实际应用场景​

1. 跨域API调用​

假设你正在开发一个前端应用，需要从另一个域名的API获取数据。通过CORS，你可以安全地从该API获取数据，而不会触发浏览器的同源策略。

2. 跨域资源共享​

在某些情况下，你可能希望多个前端应用共享同一个后端API。通过CORS，你可以控制哪些前端应用可以访问该API。

3. 跨域文件上传​

如果你需要从不同的域名上传文件到服务器，CORS可以帮助你实现这一功能。

总结​

跨域资源共享（CORS）是一种重要的浏览器机制，它允许网页从不同的域请求资源。通过理解CORS的工作原理和配置方法，你可以更好地控制跨域请求的安全性。

附加资源​

练习​

  1. 创建一个简单的Node.js服务器，配置CORS以允许来自特定域名的跨域请求。
  2. 使用fetch API从前端应用发送跨域请求，并观察浏览器的行为。

通过以上内容，你应该对HTML跨域资源共享有了更深入的理解。继续实践和探索，你将能够更好地应用CORS在实际开发中。