第二个axios函数在第一个之后不运行称为- React

Question

我在React中设置了两个axios函数。第一个函数抓取页面以检索链接列表，并随机返回其中一个链接。下一个函数使用该链接作为抓取该网页的参数，并以数组形式返回标题和第一段。所以第二个函数依赖于第一个。

当我尝试使用useEffect钩子实现这一点时，我可以让第一个函数工作，但第二个函数不检索第一个返回的链接，并给出一个错误。虽然我用的是await，但就像第二个没有等待第一个被退回一样。谁能帮我看看我哪里做错了吗?

import getLink from "./getLink.js";
// Scrapes a page for an array of links,
// returns one of those links randomly (string)
import getPage from "./getPage.js";
// Scrapes the page from getLink,
// returns [h1 text, p text] (array)
import {useEffect,useState} from "react";
const Body = () => {
const [text, setText] = useState([]);

useEffect(() => {
const getData = async () => {
const link = await getLink();
const data = await getPage(link);
setText(data);
}
getData();
}, []);

return (
<div>
<h1>{text[0]}</h1>
<div dangerouslySetInnerHTML={{__html: text[1]}}></div>
</div>
)
}
export default Body;

错误消息:从源'http://localhost:3000'访问'link from getLink'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

Answer 1

您需要确保在请求文本的服务器上有CORS。您可以使用中间件包含正确的头文件，如果您使用express.js，请查看cors包文档。

您可以通过运行

检查响应头。

curl -v http://localhost:3000

一个临时的解决方法是在你的请求选项中包含{ mode: 'no-cors' }。

Answer 2

当我在package.json中添加"proxy": "[domain name]"并从我在项目中使用的链接中删除域名时，抓取工作。

从:https://www.youtube.com/watch?v=hxyp_LkKDdk