Flutter跨域资源共享插件jaguar_cors的使用

示例

一个完整的示例可以在这里找到。

library main;

import 'dart:async';
import 'package:jaguar/jaguar.dart';
import 'package:jaguar_cors/jaguar_cors.dart';

// 配置CORS选项
static const corsOptions = const CorsOptions(
  allowedOrigins: const ['http://mine.com'],
  allowAllHeaders: true,
  allowAllMethods: true);

@Api(path: '/api')
class Routes extends Object with CorsHelper {
  // GET 请求处理
  [@Route](/user/Route)(methods: const ['GET', 'OPTIONS'])
  Response<String> get(Context ctx) {
    cors(ctx); // 调用CORS中间件
    if(ctx.req.method != 'GET') return null; // 跳过预检请求
    return Response.json('Hello foreigner!'); // 返回响应
  }

  // POST 请求处理
  [@Route](/user/Route)(methods: const ['POST', 'OPTIONS'])
  Future<Response<String>> post(Context ctx) async {
    cors(ctx); // 调用CORS中间件
    if(ctx.req.method != 'POST') return null; // 跳过预检请求
    return Response.json(await ctx.req.bodyAsJson()); // 返回响应
  }
}

// 启动服务器
main() async {
  final server = Jaguar(port: 9000);
  server.addApi(reflect(Routes())); // 添加路由
  server.log.onRecord.listen(print); // 打印日志
  await server.serve(); // 启动服务器
}

配置CORS拦截器

CorsOptions 用于配置 cors 中间件。

• allowedOrigins <List<String>>: 允许执行跨域请求的源列表。设置 allowAllOrigins 为 true 可以覆盖 allowedOrigins 并允许所有源。
• allowAllOrigins <bool>: 是否允许所有源。如果设置为 true，将覆盖 allowedOrigins 选项。
• allowedMethods <List<String>>: 客户端可以使用的跨域请求的方法列表。默认值是简单方法（GET 和 POST）。
• allowAllMethods <bool>: 是否允许所有方法。如果设置为 true，将覆盖 allowedMethods 选项。
• allowedHeaders <List<String>>: 客户端可以使用的非简单头部列表。
• allowAllHeaders <bool>: 是否允许所有头部。如果设置为 true，将覆盖 allowedHeaders 选项。
• exposeHeaders <List<String>>: 指示哪些头部对CORS API规范安全可见。
• exposeAllHeaders <bool>: 是否暴露所有头部。如果设置为 true，将覆盖 exposeHeaders 选项。
• allowCredentials <bool>: 表示请求是否可以包括用户凭证，如cookie、HTTP认证或客户端SSL证书。默认为 false。
• maxAge <int>: 表示预检请求的结果可以缓存的时间（秒）。默认为 0，表示无最大缓存时间。
• vary <bool>:
• allowNonCorsRequests <bool>: 是否允许非CORS请求？

更多详情请参见API文档。

示例

static const options = const CorsOptions(
      allowedOrigins: const ['http://mine.com'],
      // allowedHeaders: const ['X-Requested-With'],
      allowAllHeaders: true,
      allowAllMethods: true);

包装CORS拦截器

cors 拦截器本身使用起来很简单，它接受一个 CorsOptions 对象作为配置。

注意：

1. 确保路由处理函数接受 OPTIONS 方法。
2. 如果相同的路由处理函数用于处理预检和实际请求，那么在预检请求期间会跳过实际请求的主体。

[@Route](/user/Route)(methods: const ['GET', 'OPTIONS'])
Response<String> get(Context ctx) {
  cors(ctx); // 调用CORS中间件
  if(ctx.req.method != 'GET') return null;  // 跳过预检请求
  return Response.json('Hello foreigner!'); // 返回响应
}

示例

[@Route](/user/Route)(methods: const ['GET', 'OPTIONS'])
Response<String> get(Context ctx) {
  cors(ctx); // 调用CORS中间件
  if(ctx.req.method != 'GET') return null; // 跳过预检请求
  return Response.json('Hello foreigner!'); // 返回响应
}