2017-02-21 40 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