React页面中使用fetch请求数据相关异常问题,新人求解答
发布于 7 年前 作者 xwwscu 7515 次浏览 来自 问答

最近学习React做一个简单的Demo,里面需要通过访问Web接口获取数据,看别人使用fetch挺简单的,于是就引入了,但是却遇到了问题。。。 起初,直接使用fetch(url)去做,运行直接报异常:No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefore not allowed access。 goggle了一下,应该是跨域问题,有人给出解答,把请求request的mode设置为"no-cors",试了一下,跨域问题好像是解决了,在控制台里看到请求也正常返回了(含有body数据),

但是始终获取不到响应reponse里面的数据,可是数据明明就在那,而且报出的异常我很困惑:

求解答 谢谢~

PS: Demo跑在本地8000端口上resp_info_1.pngresp_info_2.pngexp_info.pngexp_code.png

11 回复

怎么会无人问津呢。。。help!

// express
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "POST GET");
    res.header("Access-Control-Allow-Credentials", 'true')
    next();
});

// koa2
const cors = require('koa-cors');
app.use(cors());

我是这样做跨域,至于为什么,我也解释不清楚,可以打断点看下返回的Object到底是什么

@lyt308012546 控制台里面看到返回的数据了,就是不知道为什么then里面会获取不到。。。稍后我试一下修改一下requestHeader试试,tsk anyway~

console 少了个反括号报错了吧?

@alonehover 检查了一遍,真心不是…

resp.json()报错吧?尝试resp.text()

@inevermore 感谢,错误是消除了,但是数据还是没有额,但是控制台里面看到数据是正常返回的。。。 nodata.png

@xwwscu 建议检查下 fetchOpt 和你请求的接口是否匹配

先单独 fetch,在整合到 react app 中;跨域不是什么问题,可以单独 debug 一下请求这块

@DevinXian 这是一种思路,不过目前修改比较大,后面如果还解决不了,考虑尝试,谢谢~

@inevermore 这个确实之前没想到过,抽时间去开放接口那里看看是否有相关说明,谢谢~

回到顶部