时间戳

首页 > 解决方案 > 用javascript做一个简单的get请求

javascript - 用javascript做一个简单的get请求

问题描述

我正在尝试在 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 策略已阻止从源“ http://localhost:3000 ”获取“ https://www.delish.com/cooking/recipe-ideas/a27469586/baked-zucchini-recipe ”的访问权限：无“访问权限” -Control-Allow-Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。index.js:1375 TypeError: 获取失败

我不确定这到底意味着什么，因为我对这一切都很陌生，所以任何帮助都将不胜感激！

标签： javascripthttprequest

解决方案

“跨域资源共享( 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，否则您将无法做您想做的事情。

推荐阅读