React向Ballerina服务器发送POST请求时遭遇CORS错误的解决方法

问题原因 #

浏览器会对跨域请求发送OPTIONS预检请求，但你的Ballerina服务器没有处理这类请求，也未返回Access-Control-Allow-Origin等CORS响应头，导致报错。Postman不会触发浏览器的CORS校验机制，所以能正常请求。

解决方案：在Ballerina中配置CORS支持 #

直接在HTTP监听器中配置CORS规则，Ballerina会自动处理预检请求并添加所需响应头：

import ballerina/http;

// 配置监听器时启用CORS
listener http:Listener ep = new(8080,
    config = {
        cors: {
            allowOrigins: ["http://localhost:3000"], // 允许你的React前端源
            allowMethods: ["POST", "OPTIONS"],       // 必须包含OPTIONS以处理预检请求
            allowHeaders: ["Content-Type"]           // 根据实际请求头调整，比如添加自定义token头
        }
    }
);

service / on ep {
    resource function post data(http:Request req) returns http:Response|error {
        // 编写你的业务逻辑
        http:Response res = new;
        res.setPayload("请求处理成功");
        return res;
    }
}

额外注意事项 #

• 开发环境测试时，若要允许所有源可以将allowOrigins设为["*"]，但生产环境禁止这么做
• 如果前端请求包含自定义头，一定要在allowHeaders数组中添加对应的字段
• 修改配置后重启Ballerina服务器，再发起前端请求即可验证问题是否解决

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