Flutter Web调用REST API遇CORS错误：缺少Access-Control-Allow-Origin头

问题核心 #

浏览器的CORS安全策略阻止了你的请求，原因是后端服务器在处理预检OPTIONS请求时，没有返回Access-Control-Allow-Origin响应头，导致浏览器判定该跨域请求不合法。

解决方案 #

后端配置（生产环境必须） #

根据你的后端技术栈，添加CORS响应头配置：

ASP.NET Core

在Program.cs中插入CORS中间件（必须放在路由配置之前）：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFlutterOrigin",
        policy => policy.WithOrigins("https://example.com") // 替换为你的Flutter Web域名
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

var app = builder.Build();

// 启用CORS
app.UseCors("AllowFlutterOrigin");

app.MapControllers();
app.Run();

开发环境可临时用.AllowAnyOrigin()允许所有域名，但生产环境必须指定具体域名。

Node.js/Express

先安装cors包：npm install cors，再配置：

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

// 允许指定Flutter Web域名
app.use(cors({
    origin: 'https://example.com'
}));

// 开发环境临时允许所有域名：app.use(cors());

app.listen(5050, () => console.log('Server running on port 5050'));

Python/Flask

安装flask-cors扩展：pip install flask-cors，再配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 允许指定Flutter Web域名
CORS(app, origins=["https://example.com"])

# 开发环境临时允许所有域名：CORS(app)

@app.route('/api/Data/GetData')
def get_data():
    return {"data": "sample content"}

if __name__ == '__main__':
    app.run(port=5050)

前端临时调试方案（仅开发环境） #

如果后端暂时无法修改，可启动Flutter Web时关闭浏览器安全策略（禁止用于生产）：

flutter run -d chrome --web-browser-args "--disable-web-security"

额外注意事项 #

• 确保CORS配置中的域名包含完整协议（https/http）和端口（如果Flutter Web使用非默认端口）。
• 预检OPTIONS请求由浏览器自动发起，后端必须正确响应该请求，不能拦截或返回错误状态码。
• 若之前的HTTP传输问题是混合内容（Flutter Web用https，后端用http），切换到https后需确保后端SSL证书有效，同时CORS配置同步更新。

内容的提问来源于stack exchange，提问作者Sulfy