获取TypeError: 获取失败

Question

我无法获取数据，不知道做错了什么。如果我在浏览器中粘贴链接，得到的响应很好，所以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

这里是片段

编辑

Answer 1

我想，在控制台中，你会得到一个错误，关于 CORS policy

为了克服这个问题，你需要设置一个代理。很简单，很容易，方法简单介绍一下。此处

EDIT: 另一种设置代理的方法是如下。

安装为开发依赖 http-proxy-middleware

npm install --save-dev http-proxy-middleware

然后创建一个名为 setupProxy.js 在您项目的 src 目录

把下面的代码贴在那里。

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));

Answer 2

所以基本上，我需要做的是：

1) 添加 "proxy": "https://www.goodreads.com" 到我的package.json

2) 删除fetch函数中的那段url，所以它应该是这样的。

fetch("/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")

而不是这个。

fetch("https://www.goodreads.com/author/list/18541?format=xml&key=TftQypHkudfH0VZcukEWtg")

也就不会再出现CORS策略和错误了:)