CNode

React页面中使用fetch请求数据相关异常问题,新人求解答

问答
Xxwwscu发布于9 年前最后回复9 年前11 回复8350 浏览0 收藏

最近学习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)

X
xwwscu#1·9 年前

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

L
lyt308012546#2·9 年前
// 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到底是什么

X
xwwscu#3·9 年前
引用 alonehoverconsole 少了个反括号报错了吧?

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

I
inevermore#4·9 年前

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

X
xwwscu#5·9 年前
引用 inevermoreresp.json()报错吧?尝试resp.text()

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

D
DevinXian#7·9 年前

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

X
xwwscu#8·9 年前
引用 lyt308012546我是这样做跨域,至于为什么,我也解释不清楚,可以打断点看下返回的Object到底是什么

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

A
alonehover#9·9 年前

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

X
xwwscu#10·9 年前
引用 DevinXian先单独 fetch,在整合到 react app 中;跨域不是什么问题,可以单独 debug 一下请求这块

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

X
xwwscu#11·9 年前
引用 inevermore@xwwscu 建议检查下 fetchOpt 和你请求的接口是否匹配

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

参与回复
登录后即可参与回复。登录