Javascript 使用axios.获取实时服务器时的404响应

根据 comments 中的讨论，您正在try 从GitHub Pages上托管的网站运行抓取代码.问题是，大多数抓取都发生在后台，其中请求不会被CORS阻止.CORS是一种服务器端限制，用于防止网站向其他来源发出请求.

try 以下代码，这足以说明问题:

fetch("https://books.toscrape.com").catch(err => console.error(err));

您应该在浏览器开发工具控制台中看到以下内容:

Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at https://books.toscrape.com/.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

...但 node 中没有错误.

您处理此问题的 Select 包括:

1. 托管一个可以为您代理请求的服务器.GH Pages没有后台，但您可以使用在确实支持后台(例如glitch)的网站上运行的Express来实现这一点.您可以使用现有的Axios + Cheerio代码发出请求并提取Express路由中想要的数据，然后将抓取的数据返回到前端仪表板.您的Express服务器将明确允许来自您的GH页面域的请求跨源setting the access control HTTP header:

   res.setHeader("Access-Control-Allow-Origin", "https://yourname.github.io");
   

2. 使用GitHub Action运行抓取代码并将数据写入GitHub仓库中的静态文件.如果数据不经常变化，这是一个很好的技术--您可以每天或每周运行您的操作.有关如何设置此功能的演练，请参阅this blog post.

3. 使用cors-anywhere代理请求，而无需托管您自己的后台.您可以使用cors-anywhere演示服务器进行测试，但从长远来看，您应该托管自己的实例，您可以在Render.com

fetch("https://cors-anywhere.herokuapp.com/" + "https://books.toscrape.com")
  .then(response => response.text())
  .then(text => {
    const doc = new DOMParser().parseFromString(text, "text/html");
    const title = doc.querySelector("title").textContent.trim();
    console.log(title);
  })
  .catch(err => console.error(err));

为了使此代码片段有效，您需要转到http://cors-anywhere.herokuapp.com/corsdemo并单击按钮才能获得临时访问权限.

请注意，实际上并不需要在前端使用axios和cheerio，只需在后台使用即可.前端已经拥有fetch、jQuery和原生多姆解析器.Cheerio是jQuery到 node 的移植，因此将其带回浏览器没有意义.Axios需要加载才能在浏览器中使用，因此它提供的轻微语法简单性无法与原生获取相媲美.