解决Ajax请求IBM Watson时的CORS Authorization头不允许问题

这个问题我之前帮不少开发者处理过——本质是浏览器的同源策略在搞事情：你的前端请求带了Authorization头，而Watson服务器的预请求（OPTIONS响应）里没有把这个头加入Access-Control-Allow-Headers列表，所以浏览器直接拦截了请求。用CORS插件能绕开是因为插件替你修改了浏览器的CORS检查，但显然不能让用户都装插件，下面给你几个靠谱的无插件方案：

1. 最安全的方案：搭建后端代理服务器 #

这是业界通用的最佳实践，原因有两个：一是彻底解决CORS问题，二是避免在前端代码里暴露Watson的API密钥（直接写在JS里太容易被扒走了）。

具体怎么做：

• 自己写一个简单的后端服务（比如用Node.js/Express、Python/Flask、Java Spring等），作为前端和Watson API之间的中间层
• 前端把请求发给你的后端代理，后端代理再带上Authorization头去请求Watson API
• 后端拿到Watson的响应后，再把结果返回给前端

举个Node.js/Express的极简例子：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// 允许前端跨域请求你的代理
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 代理Watson聊天请求的接口
app.post('/api/watson-chat', async (req, res) => {
  try {
    const watsonResponse = await axios.post(
      'https://api.us-south.assistant.watson.cloud.ibm.com/instances/xxx/v2/assistants/xxx/sessions/xxx/message',
      req.body,
      {
        headers: {
          'Authorization': 'Basic ' + Buffer.from('apikey:你的WatsonAPI密钥').toString('base64'),
          'Content-Type': 'application/json'
        }
      }
    );
    res.json(watsonResponse.data);
  } catch (error) {
    res.status(error.response.status).json(error.response.data);
  }
});

app.listen(PORT, () => console.log(`代理服务器运行在http://localhost:${PORT}`));

然后前端把Ajax请求的URL改成你的代理接口/api/watson-chat就行，不用带Authorization头了。

2. 检查是否使用Watson的前端友好型集成方式 #

有些Watson服务（比如Watson Assistant）提供了专门的Web Chat Widget，这个官方组件已经帮你处理好了CORS和身份验证的问题，不用自己写Ajax请求。你可以直接嵌入这个Widget到你的页面里，官方文档里有详细的嵌入步骤——这种方式比自己写请求省心多了，而且是官方维护的，稳定性有保障。

3. 确认Watson API端点的CORS配置 #

虽然你说无法控制Watson服务器，但可以去IBM Cloud的控制台看看你创建的Watson服务是否有CORS相关的配置项。部分Watson服务允许你在控制台添加允许的源（Origin），如果能添加你的前端域名，可能就能解决Authorization头的问题。不过这个不是所有服务都支持，你可以去对应服务的设置页面找找看。

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