CORS（跨域资源共享）：跨域请求的解决方案

前端开发工程师、技术日更博主、已过CET6
阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

CORS（Cross-Origin Resource Sharing）是一种机制，允许Web应用程序从不同的源（域）请求资源。默认情况下，浏览器出于安全考虑，只允许同源（协议、域名和端口相同）的请求。CORS通过服务器端的设置来放宽这一限制。

一、CORS的基本概念

1. 简单请求

• 简单请求：满足特定条件的跨域请求，浏览器会直接发送请求，并在响应头中检查Access-Control-Allow-Origin字段。

2. 预检请求

• 预检请求：对于不满足简单请求条件的跨域请求，浏览器会先发送一个OPTIONS请求进行预检，服务器响应后，再发送实际的请求。

二、设置CORS

使用Node.js + Express设置CORS

可以使用cors中间件来简化CORS的设置。

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

// 使用cors中间件
app.use(cors());

// 或者自定义CORS选项
app.use(cors({
  origin: 'http://example.com', // 允许的源
  methods: ['GET', 'POST'], // 允许的方法
  allowedHeaders: ['Content-Type'] // 允许的头
}));

// 定义一个路由
app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled data.' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

使用Python + Flask设置CORS

可以使用flask-cors扩展来设置CORS。

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 使用默认设置

# 或者自定义CORS选项
# CORS(app, resources={r"/data": {"origins": "http://example.com"}})

# 定义一个路由
@app.route('/data')
def get_data():
    return jsonify(message='This is CORS-enabled data.')

# 启动服务器
if __name__ == '__main__':
    app.run(port=3000)

三、注意事项

1. 安全性：放宽CORS限制可能会带来安全风险，确保只允许可信的源进行跨域请求。
2. 预检请求：对于复杂请求，浏览器会发送预检请求，确保服务器能够正确响应OPTIONS请求。
3. 浏览器支持：现代浏览器普遍支持CORS，但在一些旧版本浏览器中可能存在兼容性问题。

四、总结

CORS是一种重要的机制，允许Web应用程序从不同的源请求资源。通过合理设置CORS，可以在保证安全性的前提下，实现跨域资源共享。

---

通过本文的介绍，希望能帮助读者更好地理解CORS的概念和使用方法。