Flutter Web应用如何从响应中提取JWT？

1. Flutter Web应用是否能访问JWT？ #

可以，但前提是后端正确配置了CORS（跨域资源共享）规则，显式暴露Authorization响应头。你现在看不到这个头，大概率是后端没配置Access-Control-Expose-Headers字段，浏览器出于安全限制，会阻止前端脚本访问这类非默认暴露的响应头。

2. 若可以，该如何提取？ #

第一步：配置Rails后端的CORS #

在Rails项目的config/initializers/cors.rb中，添加expose: ['Authorization']配置，示例如下：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '你的Flutter Web域名' # 比如localhost:5000或线上正式域名
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['Authorization'] # 关键配置：将Authorization头暴露给前端
  end
end

第二步：Flutter Web端提取JWT #

用Flutter的http或dio包发送登录请求后，直接从响应头中提取：

基于http包的示例：

import 'package:http/http.dart' as http;

Future<String?> login(String email, String password) async {
  final response = await http.post(
    Uri.parse('你的Rails登录接口地址'),
    body: {'email': email, 'password': password},
  );
  
  if (response.statusCode == 200) {
    final authHeader = response.headers['authorization'];
    if (authHeader != null) {
      // JWT通常以`Bearer <token>`格式返回，提取后半段的token
      final jwtToken = authHeader.split(' ').last;
      return jwtToken;
    }
  }
  return null;
}

基于dio包的示例：

import 'package:dio/dio.dart';

Future<String?> login(String email, String password) async {
  final dio = Dio();
  try {
    final response = await dio.post(
      '你的Rails登录接口地址',
      data: {'email': email, 'password': password},
    );
    
    final authHeader = response.headers.value('authorization');
    if (authHeader != null) {
      final jwtToken = authHeader.split(' ').last;
      return jwtToken;
    }
  } catch (e) {
    // 处理请求错误
  }
  return null;
}

3. 若不行，是否只能返回httpOnly cookie？ #

不是唯一方案，但httpOnly cookie是Web端最安全的选择：

• 替代方案：可以把JWT放在响应体（比如JSON的token字段）里返回，前端拿到后存在localStorage或内存中，但这种方式容易被XSS攻击窃取，安全性较低。
• httpOnly cookie优势：浏览器会自动在后续请求中携带该cookie，且无法通过前端脚本访问，能有效防范XSS攻击，更适配Web场景的安全需求。

4. Authorization头是否仅在移动应用中可访问？ #

不是。移动端（iOS/Android）没有浏览器的同源策略限制，所以能直接获取所有响应头；但Web端受浏览器同源策略约束，只有后端通过Access-Control-Expose-Headers显式声明的响应头，前端脚本才能访问。只要后端配置正确，Flutter Web完全可以拿到Authorization头。

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