Flutter移動電商實戰-dio基礎_偽造請求頭獲取數據

在很多時候，后端為了安全都會有一些請求頭的限制，只有請求頭對了，才能正確返回數據。這雖然限制了一些人惡意請求數據，但是對於我們聰明的程序員來說，就是形同虛設。這篇文章就以極客時間 為例，講一下通過偽造請求頭，來獲取極客時間首頁主要數據。（不保證接口和安全措施一直可用哦，趕快練習吧）

查看極客時間的數據端口

如果你是一個前端，這套流程可能已經爛熟於心，先找出掘金的一個端口，來進行分析。

首先在瀏覽器端打開掘金網站（我用的是chrome瀏覽器：https://time.geekbang.org/，然后按F12打開瀏覽器控制台，來到NetWork選項卡，再選擇XHR選項卡，這時候刷新頁面就會出現異步請求的數據。我們選擇newAll這個接口來進行查看。

拷貝地址：https://time.geekbang.org/serv/v1/column/newAll

我們就以這個接口為案例，來獲取它的數據。

非法請求的實現

有了接口，我們把上節課的頁面進行一下改造。注意的是，這時候我們並沒有設置請求頭，為的是演示我們不配置請求頭時，是無法獲取數據的,它會返回一個451的錯誤。

451:就是非法請求，你的請求不合法，服務器決絕了請求，也什么都沒給我們返回。

代碼如下：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';


class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String showText='還沒有請求數據';
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         appBar: AppBar(title: Text('請求遠程數據'),),
         body: SingleChildScrollView(
           child: Column(
             children: <Widget>[
               RaisedButton(
                 onPressed: _jike,
                 child: Text('請求數據'),
               ),
               Text(showText)
             ],
           ),
         ),
       ),
    );
  }

  void _jike(){
    print('開始向極客時間請求數據..................');
    getHttp().then((val){
      setState(() {
       showText=val['data'].toString();
      });
    });
  }


  Future getHttp()async{
    try{
      Response response;
      Dio dio = new Dio(); 
      response =await dio.get("https://time.geekbang.org/serv/v1/column/newAll");
      print(response);
      return response.data;
    }catch(e){
      return print(e);
    }
  }

}

這時候我們預覽，會返現控制台無情的輸出了異常消息。

I/flutter ( 6942): DioError [DioErrorType.RESPONSE]: Http status error [451]
E/flutter ( 6942): [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception

偽造請求頭

新建一個文件夾，起名叫作config，然后在里邊新建一個文件httpHeaders.dart,把請求頭設置好，請求頭可以在瀏覽器中輕松獲得，獲得后需要進行改造。

const httpHeaders={
  'Accept': 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'zh-CN,zh;q=0.9',
'Connection': 'keep-alive',
'Content-Type': 'application/json',
'Cookie': '_ga=GA1.2.676402787.1548321037; GCID=9d149c5-11cb3b3-80ad198-04b551d; _gid=GA1.2.359074521.1550799897; _gat=1; Hm_lvt_022f847c4e3acd44d4a2481d9187f1e6=1550106367,1550115714,1550123110,1550799897; SERVERID=1fa1f330efedec1559b3abbcb6e30f50|1550799909|1550799898; Hm_lpvt_022f847c4e3acd44d4a2481d9187f1e6=1550799907',
'Host': 'time.geekbang.org',
'Origin': 'https://time.geekbang.org',
'Referer': 'https://time.geekbang.org/',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36'
};

有了請求頭文件后，可以修改主體文件，修改就是引入請求頭文件，並進行設置，主要代碼就這兩句。

import '../config/httpHeaders.dart';
dio.options.headers= httpHeaders;

全部代碼如下：

import 'package:flutter/material.dart';
import '../service/service_method.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String homePageContent = "正在獲取數據...";

  @override
  void initState() {
    getHomePageContent().then((val){
      setState(() {
        homePageContent = val.toString();
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: new AppBar(title: Text("百姓生活"),),
        body: SingleChildScrollView(
          child: Text(homePageContent),
        ),
      ),
    );
  }

}

現在就可以正常獲取數據了。效果圖如下所示：

課程總結：

本節主要學習了Dio中如何通過偽造請求頭來獲取別人接口的數據，學會了這個是非常有用的，以后我們想自己作練習Demo時就不用為后端接口而犯愁了。