如何使用Flutter无错误访问Twitter API并解决XMLHTTPREQUEST报错

基础语法错误修复 #

你的代码存在异步语法使用错误：await 关键字只能在标注了async的函数内部使用，你直接在State类的属性初始化位置调用var tweet = await twitterRequest;属于语法错误，会直接导致编译/运行失败。

XMLHttpRequest错误分场景处理 #

XMLHttpRequest错误本质是网络请求被拦截，按运行平台对应处理：

• Flutter Web平台：Twitter官方API没有配置跨域资源共享(CORS)头，浏览器会直接拦截前端直接发起的跨域请求。本地调试阶段可以启动禁用安全策略的Chrome进行测试，生产环境必须通过你自己的后端服务代理转发Twitter API请求。
• Android平台：需要在android/app/src/main/AndroidManifest.xml的manifest标签下添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS平台：需要在ios/Runner/Info.plist的dict标签下添加网络请求权限配置：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

前置权限校验 #

你使用的statuses/user_timeline.json属于Twitter API v1.1接口，需要你在Twitter开发者后台为你的应用申请Elevated权限，同时保证你填写的consumerKey、token等凭证有效，否则会返回403无权限错误。

修复后的完整可运行代码（已包含随机推文功能） #

import 'package:twitter_api/twitter_api.dart';
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const Twittwrapp());
}

final _oauth = twitterApi(
  consumerKey: 'consumerkeyhere',
  consumerSecret: 'consumersecrethere',
  token: 'tokenhere',
  tokenSecret: 'tokensecrethere',
);

Future twitterRequest = _oauth.getTwitterRequest(
  "GET",
  "statuses/user_timeline.json",
  options: {
    "user_id": "19025957",
    "screen_name": "TTCnotices",
    "count": "20",
    "trim_user": "true",
    "tweet_mode": "extended",
  },
);

class Twittwrapp extends StatefulWidget{
  const Twittwrapp({super.key});

  @override
  _Twitte createState() => _Twitte();
}

class _Twitte extends State<Twittwrapp>{
  List? tweetList;
  String? currentShowTweet;

  @override
  void initState() {
    super.initState();
    _loadTweets();
  }

  Future<void> _loadTweets() async {
    final response = await twitterRequest;
    setState(() {
      tweetList = response;
      currentShowTweet = tweetList?.first['full_text'];
    });
  }

  void _getRandomTweet() {
    if (tweetList == null || tweetList!.isEmpty) return;
    final random = Random();
    final randomIndex = random.nextInt(tweetList!.length);
    setState(() {
      currentShowTweet = tweetList![randomIndex]['full_text'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _getRandomTweet,
          child: const Icon(Icons.refresh),
        ),
        body: Center(
          child: tweetList == null 
            ? const CircularProgressIndicator()
            : Text(currentShowTweet ?? '无推文数据'),
        ),
      ),
    );
  }
}

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