获取 TypeError：无法获取

Question

我无法获取数据，也不知道做错了什么。如果我在浏览器中粘贴链接，我会得到很好的响应，所以 api 密钥很好。格式是 xml，所以我也转换了它，如下所示。在“响应标头”中，我得到状态 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

这里是sn-p

编辑

Answer 1

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

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 政策和错误 :)

Answer 2

我猜你在控制台中会收到一个关于 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));