如何解决前端向Flask服务器发送AJAX请求时的CORS问题

嘿，我看到你在用Flask做后端、JavaScript做前端时遇到了CORS跨域限制的问题，这在前后端分离的项目里真的超常见，别慌，我给你几个靠谱的解决办法，一步步来搞定它！

方法一：用Flask-CORS扩展（最推荐） #

这是最简单高效的方式，专门为Flask处理CORS问题设计的工具，省心又靠谱。

1. 先安装扩展
   打开终端，运行下面的命令：

pip install flask-cors

2. 在你的Flask应用中配置CORS
   修改你的Flask后端代码，导入并初始化CORS：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 最简单的配置：允许所有前端域名访问所有路由
CORS(app)

# 或者更安全的配置：只允许指定的前端域名访问/detect路由
# CORS(app, resources={r"/detect": {"origins": "http://你的前端域名:端口号"}})

@app.route('/detect', methods=['POST'])
def detect_image():
    # 这里写你处理上传图片的逻辑，比如读取formData里的image文件
    # 假设处理后得到is_healthy的判断结果
    is_healthy = True  # 替换成你的实际业务逻辑
    return jsonify({"is_healthy": is_healthy})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

如果用第二种更严格的配置，记得把http://你的前端域名:端口号换成你实际的前端地址（比如http://localhost:3000），这样能避免无关网站随意请求你的后端，安全性更高。

方法二：手动添加响应头（不用扩展的方案） #

如果你不想用第三方扩展，也可以在每个路由的响应里手动设置CORS相关的头：

from flask import Flask, jsonify, make_response

app = Flask(__name__)

@app.route('/detect', methods=['POST'])
def detect_image():
    # 处理图片的业务逻辑...
    is_healthy = True
    response = make_response(jsonify({"is_healthy": is_healthy}))
    # 允许所有域名访问，也可以替换成你的前端具体域名
    response.headers.add('Access-Control-Allow-Origin', '*')
    # 明确允许POST请求方法
    response.headers.add('Access-Control-Allow-Methods', 'POST')
    return response

不过这种方法比较繁琐，要是有多个路由的话得逐个添加头信息，不如用扩展来得方便，所以还是更推荐第一种方案。

对你的前端代码的小提醒 #

看了你贴的JavaScript代码，processData: false和contentType: false这两个设置完全正确！因为你用了FormData上传文件，这两个参数必须这样配置，不用改动~ 另外如果是本地测试，AJAX的URL也可以写成相对路径'/detect'，不用写死IP，这样更灵活。

备注：内容来源于stack exchange，提问作者Summer Bittencourt