2015-05-26 35 views
8

我有一個使用Vagrant構建的本地虛擬機。我能夠捲曲並直接從瀏覽器訪問URL。出於某種原因,當我使用fetch API在我的react-native應用中進行相同的調用時,它會一直給我提供Network request failed錯誤。無法使用react-native進行API調用

下面是代碼片段:

fetchData() { 

    this.setState({ isLoading: true }); 

    var baseURL = 'https://192.168.33.33/api/session'; 

    console.log('URL: >>> ' + baseURL); 

    fetch(baseURL) 
    .then((response) => response.json()) 
    .then((responseData) => { 
    console.log(responseData); 
    }) 
    .catch(error => { 
    console.log(error); 
    }) 
    .done(); 
} 

baseURL日誌有返回正確的URL和錯誤看起來像這樣:

URL: >>> http://192.168.33.33/api/session 
TypeError: Network request failed {stack: (...), message: "Network request failed"} 
    message: "Network request failed" 
    stack: (...) 
    get stack: function() { [native code] } 
    set stack: function() { [native code] } 
    __proto__: Error 

我想這可能已經是一個問題由於我的虛擬機無法通過我的應用以某種方式訪問​​,所以我繼續前進並將其部署到真正的服務器,並且仍然給出了相同的錯誤。

任何想法?

+0

'https:// 192.168.33.33/api/session'可能需要獲取請求中的某種標頭? – lyjackal

+0

@lyjackal我不這麼認爲,所有的代碼確實是這樣的:http://d.pr/n/18BiU/3kXPWHcD –

+0

如果使用XMLHttpRequest對象,而不是獲取,你得到同樣的錯誤? CORS安裝是否正確? – user2943490

回答

4

發現問題並解決它。

該問題是由於沒有自行創建的CA而在API服務器中擁有自簽名證書所致。

我可以嘗試創建自己的CA,然後創建一個證書,但我繼續,並得到了真正便宜的SSL證書。這解決了這個問題。

-1

我想你可能會面臨的same origin policy約束。

有變通辦法的many方式。

+0

感謝您的回答!不幸的是,情況並非如此。 –

+1

這不適用於反應原生應用程序。 – Clintm

+0

同源產品策略僅適用於瀏覽器! – Germinate