Question

我正在尝试在javascript中进行一些简单的网络抓取，以从美味或美味的网站中获取html代码以存储食谱。这个网站就是一个例子：https://www.delish.com/cooking/recipe-ideas/a27469586/baked-zucchini-recipe/ 但是，当我使用fetch时，我无法使其正常工作。

我实际上用python编写了等效代码，希望能够将其转换为javascript。粘贴在这里：

import requests
url = "https://www.delish.com/cooking/recipe-ideas/a27469586/baked-zucchini-recipe/"
r = requests.get(url)
text = str(r.content)

当我使用其他网站时，我能够使javascript代码正常工作。例如，这对我有用

fetch('https://api.github.com/users/maecapozzi')
   .then(res => console.log('response: ', res))
   .catch(console.error)

但是在尝试访问我的网站时出现错误：

通过CORS策略阻止从原点“ https://www.delish.com/cooking/recipe-ideas/a27469586/baked-zucchini-recipe”到“ http://localhost:3000”的访存：所请求的资源上没有“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。 index.js：1375 TypeError：无法获取

我不确定这到底意味着什么，因为我对这一切还很陌生，因此，将不胜感激！

Answer 1

“ 跨域资源共享（ CORS ）是一种机制，该机制使用其他HTTP标头来告诉浏览器让一个源（域）运行的Web应用程序有权从其他来源的服务器访问选定的资源。Web应用程序在请求其来源（域，协议和端口）与其来源不同的资源时，会执行跨域HTTP请求。

跨域请求的示例：从http://domain-a.com服务的Web应用程序的前端JavaScript代码使用XMLHttpRequest来向http://api.domain-b.com/data.json发出请求。

出于安全原因，浏览器限制了从脚本内部发起的跨域HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载该应用程序的同一来源请求HTTP资源，除非来自其他来源的响应包括正确的CORS标头。“

发件人：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

基本上，服务器管理员会实施CORS策略，专门用于防止您尝试执行的操作，即通过您站点上运行的代码从另一个站点访问内容。除非您要访问的服务器通过非限制性的CORS策略或Github之类的可公开访问的API允许这种访问，否则您将无法做您想做的事情。

Answer 2

出于安全考虑，浏览器实施CORS，并防止网站从客户端抓取其他网站。

https://api.github.com通过指定Access-Control-Allow-Origin: *标头明确允许来自其他网站的联系。

如果您想自己用Javascript编写网络抓取功能，那么您可能可以在浏览器中禁用CORS。如果您的网站需要抓取另一个网站，则可以编写Python（或类似的服务器）来为您抓取该网站，然后将内容重新托管在您控制的域上（粗略，可能很糟糕理念）。

在javascript中进行简单的获取请求

2 个答案: