获取TypeError:获取失败
我无法获取数据，也不知道哪里做错了。如果我在浏览器中粘贴链接，我得到的响应很好，所以api密钥是正确的。格式是xml，所以我也对其进行了转换，如下所示。在'Response Headers‘中，我得到的状态是200 OK。
import React, { useEffect } from 'react'
function Api() {
useEffect(() => {
fetch("https://www.goodreads.com/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")
.then(res => res.text())
.then(data => {
let parser = new DOMParser()
let xmlDoc = parser.parseFromString(data, 'text/xml')
console.log(xmlDoc)
})
.catch(err => console.log(err));
}, [])
return (
<div></div>
)
}
export default Api以下是代码片段
编辑
回答 2
Stack Overflow用户
发布于 2020-04-23 19:04:07
我猜在控制台中您会得到一个关于CORS policy的错误
为了解决这个问题，您需要设置一个代理。该方法简单易行，在here中作了简要说明
编辑:设置代理的另一种方法如下：
作为开发依赖项http-proxy-middleware安装
npm install --save-dev http-proxy-middleware
然后在项目的src目录中创建一个名为setupProxy.js的文件
将以下代码粘贴到此处：
const proxy = require('http-proxy-middleware')
const serverUrl = 'https://www.goodreads.com';
const options = {
target: serverUrl,
changeOrigin: true
};
module.exports = function(app) {
app.use('/api/*', proxy(options));
app.use('/api/author/list/*', proxy(options));
};然后像这样获取你的请求：
useEffect(() => {
fetch("/api/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")
.then(res => res.text())
.then(data => {
let parser = new DOMParser()
let xmlDoc = parser.parseFromString(data, 'text/xml')
console.log(xmlDoc)
})
.catch(err => console.log(err));
}, [])如果需要在同一个源中获取不同的URL模式，例如
https://www.goodreads.com/author/somethingelse/id
在代理URL列表中添加一个新条目，如下所示：
app.use('/api/author/somethingelse/*', proxy(options));
Stack Overflow用户
发布于 2020-04-23 19:58:23
所以基本上，我需要做的是：
1)在我的package.json中添加"proxy": "https://www.goodreads.com"
2)从fetch函数中删除这段url，使其看起来如下所示：
fetch("/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")
而不是这样：
fetch("https://www.goodreads.com/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")
不再有CORS策略和错误:)
https://stackoverflow.com/questions/61385186
复制相似问题
腾讯云开发者
