在本地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

回答

相关问题