IBM Watson Conversation API:“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权”

IT技术 reactjs react-native cors fetch-api watson-conversation
2021-04-29 02:19:01

我创建了一个连接到 Watson REST API 的 React-Native 应用程序。使用作为 ReactNative 一部分的 fetch 库,一切都可以很好地获取工作区列表,如下所示:

    const myAuth = new Buffer(USR+':'+PWD).toString('base64');
    const myInit = {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Origin': '',
            'Authorization': 'Basic ' + myAuth,
        }
    };

    return fetch(URL, myInit)
        .then((response) => response.json())
        .then((responseJson) => { ... }

我现在转向 React(而不是 ReactNative)和whatwg-fetch库。相同的代码不起作用。首先我得到的错误是:

预检响应中的 Access-Control-Allow-Headers 不允许请求头字段授权。

然后阅读关于这些类型问题的数十个线程,它就变成了黑魔法。为 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等添加标头。到目前为止,一切都没有真正奏效。最终问题变成了:

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-headers。

有人可以请我指出一个有效的例子或代码吗?

==============

更新 ...

谢谢@sideshowbarker 和@FakeRainBrigand。我想服务器端对于浏览器客户端应用程序来说是必不可少的。

2个回答

浏览器拒绝发送您的请求,因为您向其发送请求的服务器尚未启用 CORS,至少没有启用这些标头。

不修改目标服务器的唯一解决方案是编写自己的服务器,代表客户端发出请求。

删除正在设置Access-Control-Allow-Headers请求标头的任何客户端代码

标头是启用 CORS 的服务器发送的响应标头。您不会从客户端设置它。

根据问题中引用的错误消息,听起来服务器可能已经正确配置为发送正确的Access-Control-*标头。(否则你会得到一个错误,说Access-Control-Allow-Origin响应中没有。)

此时可以从问题中的信息中识别出的唯一错误就是请求的问题,包括Access-Control-Allow-Headers不应该存在请求标头。