2017-02-21 71 views
1

我创建了一个连接到Watson REST API的React-Native应用程序。使用提取库是ReactNative的一部分,一切都被用于获取工作区列表,像这样的工作很好:IBM Watson(对话)带有提取的REST API(whatwg-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) => { ... } 

我现在正反应(而不是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。我想,然后服务器端是浏览器客户端应用程序的必须。

回答

1

浏览器拒绝发送您的请求,因为您发送请求的服务器未启用CORS,至少不会与这些标头一起使用。

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

+0

那么为什么它与React-Native fetch @FakeRainBrigand一起工作呢? – TalBeno

+3

React-Native应用程序在相同来源的Web安全模型之外运行,以防止Web应用程序发出跨域请求(除非该站点通过使用“Access-Control-Allow-Origin”标头响应来发送请求。 React运行在浏览器中的web-app代码中,浏览器是唯一实施跨源/ CORS限制的地方。React-Native应用程序在浏览器外部运行,因此它们不受任何跨源限制的约束实际上不是从任何原点开始运行的,所以“交叉原点”的概念不适用于它们。 – sideshowbarker

1

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

头是一个响应头,支持CORS的服务器发送。您不要从客户端进行设置。

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

此时问题中的信息唯一的错误就是请求的问题,包括Access-Control-Allow-Headers请求标头,应该不在那里。

+0

当我删除它时 - 我回到“请求标头字段授权不允许通过预检响应中的Access-Control-Allow-Headers”。 – TalBeno

+0

是的,所以我猜API没有CORS支持。至少如果它是https://www.ibm.com/watson/developercloud/conversation/api/v1/,那么没有迹象表明存在CORS支持,并且没有示例说明从运行web应用程序客户端代码的API使用API在浏览器中。 – sideshowbarker