如何使用按钮颤动来触发函数中的http触发器？

Question

我目前正在 azure 函数中尝试 http 触发器。但是，如果我单击 flutter Web 应用程序上的按钮，就会发生触发。我应该使用 REST API 或任何其他方式来执行此操作。 网址是

https://functionappname.azurewebsites.net/api/http_trigger?blob_name=file.text

代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Azure Function Trigger',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Future<void> triggerAzureFunction() async {
    // Replace 'YOUR_FUNCTION_URL' with the URL of your Azure Function HTTP trigger
    final url = Uri.parse('YOUR_FUNCTION_URL');

    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        print('Azure Function triggered successfully');
        // Handle success response
      } else {
        print('Failed to trigger Azure Function: ${response.statusCode}');
        // Handle failure response
      }
    } catch (e) {
      print('Failed to trigger Azure Function: $e');
      // Handle exception
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Azure Function Trigger'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: triggerAzureFunction,
          child: Text('Trigger Azure Function'),
        ),
      ),
    );
  }
}

错误

无法触发 Azure 函数：XMLHttpRequest 错误。

我怀疑 CORS，因此给出“*”以允许所有请求。 仍然出现同样的错误

Answer 1

• 验证您的函数 URL。

要触发Http触发函数，需要在代码中传入函数URL。

无法触发 Azure 函数：XMLHttpRequest 错误。

这是一个 CORS 错误，要解决此错误，请实现调用函数 URL 的后端层。

• 在 Azure Function App 中的 API 下配置 CORS 设置，以允许访问 Web 应用程序或

  *

  。
• 如果您有 post 方法中的 header 属性，请将其删除并在 Portal 中配置 CORS。

代码片段：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Azure Function Data Fetcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String? data;

  Future<void> fetchData() async {
    String url = "https://functionname.azurewebsites.net/api/HttpTrigger";
    try {
      final response = await http.get(Uri.parse(url));

      if (response.statusCode == 200) {
        setState(() {
          data = response.body;
        });
      } else {
        print('Failed to fetch data. Error code: ${response.statusCode}');
      }
    } catch (error) {
      print('Error fetching data: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Azure Function Data Fetcher'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Fetch Data from Azure Function'),
            ),
            SizedBox(height: 20),
            if (data != null)
              Text(
                'Data from Azure Function: $data',
                style: TextStyle(fontSize: 16),
              ),
          ],
        ),
      ),
    );
  }
}

参考资料：

https://www.digitalocean.com/community/tutorials/flutter-flutter-http