使用fetch api远程加载md文件并在客户端/浏览器上解析它

Question

我想使用fetch API加载.md文件，我需要使用marked

解析它

我在通过fetch api抓取文件时遇到问题，我没有收到response.blob()和response.arrayBuffer()的任何回复。

fetch('http://s3.amazon.com/some_bucket/some_file.md')
 .then(response => response.blob())
 .then(result => console.log(result));

然后我想获取结果并将其传递给react组件来呈现它。我将使用标记（从npm）解析它。

任何帮助都将不胜感激。

Answer 1

我认为您收到了No 'Access-Control-Allow-Origin' header is present on the requested resource.错误回复。也就是说，您正在制作跨域请求，从而违反了Same-origin policy。

基本上，您需要在S3 Bucket上启用跨源资源共享（CORS）。具体怎么做，你可以read here。

此外，正如快速测试一样，您可以为您尝试使用此https://crossorigin.me/抓取的网址添加前缀：

fetch('https://crossorigin.me/http://s3.amazon.com/some_bucket/some_file.md')
 .then(response => response.blob())
 .then(result => console.log(result));

应该使请求成功。不过，这仅用于测试。