一、啥是跨域请求和 CORS
咱先弄明白啥叫跨域请求。简单来说，当你在一个网页上，想从另一个不同域名的服务器上获取数据或者资源的时候，就会出现跨域问题。比如说，你在 http://example.com 这个网站上，想从 http://api.example2.com 去拿数据，这就属于跨域请求啦。
为啥会有跨域问题呢？这是浏览器的一种安全机制，它为了防止一些恶意的网站去访问其他网站的数据，所以默认情况下是不允许跨域请求的。
而 CORS 呢，就是跨域资源共享（Cross - Origin Resource Sharing）的缩写。它是一种机制，能让服务器告诉浏览器，允许哪些域名的网页来访问自己的资源，这样就可以解决跨域请求的问题啦。
二、Flask 里为啥会有跨域请求问题
Flask 是一个轻量级的 Python Web 框架，用它来开发 Web 应用特别方便。但当我们用它来做前后端分离的项目时，前端代码一般运行在一个域名下，后端 Flask 服务运行在另一个域名下，这时候就会出现跨域请求问题。
举个例子，假如前端页面是运行在 http://localhost:8080 上，而 Flask 后端服务运行在 http://localhost:5000 上。前端页面想要向后端服务发送一个请求，就会被浏览器拦截，因为这是跨域请求。
三、解决 Flask 跨域请求问题的方法
1. 使用 Flask - CORS 扩展
Flask - CORS 是一个专门用来解决 Flask 跨域请求问题的扩展，使用起来非常简单。
技术栈：Python + Flask
# 导入 Flask 和 CORS 扩展
from flask import Flask
from flask_cors import CORS
# 创建 Flask 应用实例
app = Flask(__name__)
# 初始化 CORS 扩展，允许所有域名进行跨域请求
CORS(app)
# 定义一个简单的路由
@app.route('/')
def hello_world():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=True)
在这个例子里，我们导入了 Flask 和 Flask - CORS 扩展，然后用 CORS(app) 初始化扩展，这样就允许所有域名的网页来访问这个 Flask 应用的资源啦。
2. 手动设置响应头
除了使用扩展，我们也可以手动设置响应头来解决跨域问题。
技术栈：Python + Flask
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/data')
def get_data():
response = jsonify({'message': 'This is some data'})
# 设置响应头，允许指定域名进行跨域请求
response.headers.add('Access-Control-Allow-Origin', 'http://localhost:8080')
return response
if __name__ == '__main__':
app.run(debug=True)
在这个例子中，我们在路由函数里手动设置了 Access - Control - Allow - Origin 响应头，指定了允许访问的域名。这样，只有 http://localhost:8080 这个域名的网页才能访问这个接口。
四、应用场景
跨域请求问题在很多场景下都会遇到，尤其是在前后端分离的项目中。比如：
- 前后端分离开发：前端用 Vue 或者 React 开发，后端用 Flask 开发，前端和后端运行在不同的域名或者端口上，就会有跨域问题。
- 第三方 API 调用：当我们的应用需要调用第三方的 API 时，也可能会遇到跨域问题。比如调用 Google Maps API 或者其他一些开放的 API。
五、技术优缺点
优点
- 使用 Flask - CORS 扩展：
- 简单方便，只需要几行代码就可以解决跨域问题。
- 可以灵活配置，比如可以指定允许的域名、请求方法等。
- 手动设置响应头：
- 更加灵活，可以根据具体的业务需求，在不同的路由里设置不同的响应头。
缺点
- 使用 Flask - CORS 扩展：
- 可能会增加一些额外的依赖，对于一些小型项目来说，可能会显得有些冗余。
- 手动设置响应头：
- 代码量会相对多一些，而且如果有很多路由都需要设置跨域响应头，会比较麻烦。
六、注意事项
- 安全问题：在设置允许的域名时，要谨慎选择，不要随意设置为
*（允许所有域名），这样会存在安全风险，可能会被恶意网站利用。 - 请求方法：除了设置
Access - Control - Allow - Origin响应头，还需要根据实际情况设置Access - Control - Allow - Methods和Access - Control - Allow - Headers等响应头，以允许不同的请求方法和请求头。
七、文章总结
跨域请求问题是在开发 Web 应用时经常会遇到的问题，尤其是在前后端分离的项目中。在 Flask 里，我们可以使用 Flask - CORS 扩展或者手动设置响应头来解决这个问题。每种方法都有自己的优缺点，我们需要根据具体的项目需求来选择合适的方法。同时，在解决跨域问题时，一定要注意安全问题，避免给应用带来安全隐患。
评论