在本地React應用程序和本地Springboot服務問題之間接收JSON

我運行的是本地Springboot服務器，當我在瀏覽器本地訪問它時，它給了我一個正確格式正確的JSON對象（我通過JSON格式化程序驗證了這一點）。在本地React應用程序和本地Springboot服務問題之間接收JSON

我也在本地運行使用節點的React應用程序。我試圖使用fetch（）來取回那個JSON對象並且遇到問題。終於找到了CORs頭文件的問題，但是不知道爲什麼JSON對象不會回來。這裏是我的代碼

var headers = new Headers(); 
headers.append("Content-type", "application/json;charset=UTF-8"); 

var myInit = { method: 'GET', 
       headers: headers, 
       mode: 'no-cors', 
       cache: 'default', 
};  

fetch(`http://localhost:3010/getJSON`, myInit) 
    .then(function(response){ 
    console.log(response.data); 
    console.log(response); 
    console.log(JSON.parse(JSON.stringify(response))); 
    },function(error){ 
    console.log(error); 
    });

所以，當我運行這個在Chrome與調試，到3個日誌報表的答覆是：

1日記錄

undefined

第二記錄

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false,   
…} 
body 
: 
(...) 
bodyUsed 
: 
false 
headers 
: 
Headers {} 
ok 
: 
false 
redirected 
: 
false 
status 
: 
0 
statusText 
: 
"" 
type 
: 
"opaque" 
url 
: 
"" 
__proto__ 
: 
Response

3rd logger

{}

我已經嘗試了許多不同的JSON解析，stringify等無濟於事。

下一個令人困惑的部分是，如果在Chrome調試器中，我轉到「網絡」選項卡，單擊/ getJSON，它會在「預覽」和「響應」標籤中顯示完整的JSON對象。很顯然，Chrome正確地連接到它。這裏的「網絡」在Chrome瀏覽器的「頭」選項卡：

Request URL:http://localhost:3010/getJSON 
Request Method:GET 
Status Code:200 
Remote Address:[::1]:3010 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
view source 
Content-Type:application/json;charset=UTF-8 
Date:Thu, 12 Oct 2017 16:05:05 GMT 
Transfer-Encoding:chunked 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Host:localhost:3010 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

我試圖模仿這個頭在我的請求，但不知道它有什麼不同？任何幫助將不勝感激，因爲我目前正在用這種方式撞我的頭！

來源

2017-10-12 bcannariato

嘗試使用RestClient或Postman命令您的api並驗證數據是否正常 – John

您不需要指定'mode：'no-cors''。 JSON對象不返回的原因是因爲您指定了'mode：'no-cors''。告訴瀏覽器是什麼，*「在任何情況下都不允許我的前端JavaScript代碼訪問響應。」*如果你指定'mode：'no-cors''的原因是你以其他方式獲得CORS錯誤，那麼正確的解決方法就是配置你發出請求的服務器，以便它在響應中發回正確的CORS頭文件。 – sideshowbarker

你可以看到devtools Network選項卡的響應的原因是瀏覽器得到的響應很好。但僅僅因爲瀏覽器得到響應並不意味着它會將該響應暴露給您的前端JavaScript代碼。如果響應包含Access-Control-Allow-Origin標題，則瀏覽器將僅向您的代碼公開響應。 – sideshowbarker

你會得到一個不透明的響應，它告訴我可能你還沒有完全解決cors頭部的情況。如果你從客戶端獲取，我會建議通過你的nodejs來代理，以便不用調用你的springboot服務，而是調用node，從而擺脫cors問題。

編輯

您可以創建這樣的事情：

import express from 'express'; 
import request from 'request'; 

const router = express.Router(); 

router.get('/proxyname', (req, res) => { 
    // Removing IPv4-mapped IPv6 address format, if present 
    const requestUrl = [your service's endpoint]; 

    request(requestUrl, (err, apiResponse, body) => { 
    res.status(apiResponse.statusCode); 
    try { 
     res.json(JSON.parse(body)); 
    } catch (e) { 
     res.send(body); 
    } 
    }); 
}); 

export default router;

，然後在你的NodeJS服務器文件，添加它，就像這樣：

import proxy from '[path to proxy file above]'; 
app.use('/path-to-endpoint', proxy);

，然後調用從客戶端而不是您的SpringBoot服務。

來源

2017-10-12 17:00:12 jarz

所以我試圖尋找通過package.json添加代理，並試圖在我的fetch（）調用中使用http-agent，但迄今爲止還沒有運氣。有什麼建議麼？ – bcannariato

在你原來的問題上，你提到「我也在本地運行使用節點的React應用程序」。這就是我獲得代理的想法的地方。你必須創建一個端點，使用快遞或任何你使用的HTTP庫。從該端點的主體中，您可以調用SpringBoot服務並返回響應。 – jarz

剛剛添加了一個我的意思是我的答案的例子，假設你在nodejs上運行這個 – jarz

在本地React應用程序和本地Springboot服務問題之間接收JSON

回答

相關問題