如何为IBM Code Engine应用启用CORS跨域访问配置

IBM Code Engine 作为Serverless应用运行平台，本身不内置CORS响应头自动注入能力，CORS属于HTTP应用层规则，需要在请求处理链路中配置。
你当前的报错是因为前端GET请求携带了Content-Type: application/json头，不属于浏览器定义的简单请求范畴，浏览器会自动先发送OPTIONS方法的预检请求，而后端API没有对OPTIONS请求返回合法的CORS头，导致请求被拦截。直接用curl、浏览器地址栏调用不会触发预检，所以能正常访问。

按优先级从高到低排列： #

方案1：后端应用原生配置CORS（生产环境首选，最稳定） #

直接在你的API应用代码里添加CORS处理逻辑，重新通过Cloud Native Buildpack构建部署即可，不需要调整Code Engine平台侧任何配置。
核心配置必须覆盖两点：

1. 对所有路径的OPTIONS预检请求返回200/204状态码
2. 所有响应（包括预检响应、正常业务响应）必须携带以下头：
   • Access-Control-Allow-Origin：本地调试阶段填http://localhost:3000，生产环境替换为前端实际部署的域名，禁止生产环境用通配符*，避免任意站点都能跨域调用你的API
   • Access-Control-Allow-Methods：配置API实际支持的请求方法，比如GET, POST, OPTIONS
   • Access-Control-Allow-Headers：配置请求允许携带的头，比如Content-Type
     不同技术栈的配置参考：

• Node.js + Express 栈：直接引入cors中间件

const cors = require('cors');
// 配置允许的跨域源
app.use(cors({
  origin: ['http://localhost:3000', 'https://你的生产前端域名'],
  allowedHeaders: ['Content-Type'],
  methods: ['GET', 'POST', 'OPTIONS']
}));

• Python + Flask 栈：使用flask-cors扩展

from flask_cors import CORS
CORS(app, origins=["http://localhost:3000", "https://你的生产前端域名"])

方案2：本地开发用create-react-app内置代理绕过跨域（仅本地调试有效，生产不可用） #

如果暂时不想修改后端代码，本地调试时可以用create-react-app自带的代理能力，把接口请求通过本地开发服务转发到Code Engine应用，从根源上避免浏览器跨域校验：

1. 打开React项目根目录的package.json，添加代理配置：

{
  // 保留原有所有配置，新增以下字段
  "proxy": "https://你的Code Engine应用的完整访问域名"
}

2. 修改useEffect中的请求逻辑，去掉硬编码的域名拼接，改为相对路径请求，同时修正依赖数组：

useEffect(() => {
    if (!endpoint || !method) return;
    console.log('Starting');
    // 本地走代理，生产如果前后端同域可以直接复用
    const appurl = method;

    fetch(appurl, {
        method: 'GET',
        headers: {
            "Content-Type": "application/json" 
        }
    })
    .then(response => console.log(response))
    .catch(console.error);

    console.log('url is ', appurl);
// 原代码依赖数组为空，endpoint/method变化时不会重新触发请求，必须加入依赖
}, [endpoint, method]);

3. 重启本地npm start服务即可正常调用接口。注意npm run build打出来的生产包不会携带这个代理规则，上线前必须完成后端CORS配置。

方案3：部署反向代理层注入CORS头（适合无后端代码修改权限的场景） #

如果无法修改后端API代码，可以在Code Engine上额外部署一个轻量反向代理（Nginx/Caddy均可），前端所有请求先打到代理服务，由代理转发到后端API，同时自动给响应添加CORS头。
以Nginx核心配置为例：

server {
    listen 8080;
    location / {
        proxy_pass https://你的原Code Engine API应用域名;
        # 注入CORS头，always参数保证错误响应也携带头
        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Content-Type" always;
        # 直接返回OPTIONS预检请求
        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

部署完成后，把前端的请求地址改为代理应用的访问域名即可。

如果你的GET请求没有特殊的JSON body传参需求，可以去掉Content-Type: application/json请求头，此时请求会被浏览器判定为简单请求，不会发送OPTIONS预检，能降低跨域拦截概率，但这只是临时规避手段，生产环境还是要按标准配置CORS规则。

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