Flutter Web应用HTTP请求遇CORS拦截问题求助

问题核心 #

你遇到的问题本质是：CORS 是浏览器的安全机制，你在请求里添加的 Access-Control-* 头是服务端应该返回给浏览器的响应头，不是客户端需要发送的请求头。谷歌的服务器不会给你的 localhost 域名返回允许跨域的响应头，所以浏览器直接拦截了请求，你加再多请求头也没用。

解决办法 #

1. 开发环境临时方案：代理中转 #

浏览器的CORS限制只针对前端直接请求第三方服务，通过代理服务器中转请求就能绕开这个限制：

• 搭个简单的Node.js代理（需先安装express和http-proxy-middleware）：

  const express = require('express');
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const app = express();
  
  // 将 /google 路径的请求转发到谷歌服务器
  app.use('/google', createProxyMiddleware({
    target: 'https://www.google.com',
    changeOrigin: true,
    pathRewrite: { '^/google': '' } // 移除请求路径前缀
  }));
  
  app.listen(3000, () => console.log('代理服务器运行在 3000 端口'));
  

• 修改Flutter代码，请求代理地址：

  var client = http.Client();
  try {
    var url = 'http://localhost:3000/google/';
    var response = await http.get(Uri.parse(url));
    print(response.body);
    print(response.statusCode);
  } finally {
    client.close();
  }
  

2. 生产环境方案：后端中转 #

如果应用要上线，不能依赖本地代理，需要用自己的后端服务做中转：

• 让你的后端服务器发起对谷歌的请求，再把结果返回给Flutter Web前端
• 前端仅请求自己的后端接口，这样就不会触发浏览器的CORS限制

3. 为什么之前正常？ #

如果之前请求没问题，大概率是你之前在Flutter移动端/桌面端测试——这些平台的HTTP请求不受浏览器CORS规则限制，只有Web端会触发这个机制。

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