没有“访问控制允许来源”：读取 CSV，D3 [重复]答案

【问题标题】：No 'Access-Control-Allow-Origin': Reading CSV, D3 [duplicate]没有“访问控制允许来源”：读取 CSV，D3 [重复]
【发布时间】：2019-07-26 07:29:03
【问题描述】：

我正在尝试从源 https://stats.oecd.org/Index.aspx?DataSetCode=WILD_LIFE 读取 csv。

设 x 为上面的 url。

 <script type="text/javascript">  
  var data_threatened = d3.csv(x)
   .then(function(data){
    console.log(data);
  })  
  </script>

但是，当我在本地主机上运行此脚本时，我会收到以下消息：

访问获取 'https://stats.oecd.org/Index.aspx?DataSetCode=WILD_LIFE' 来自原点 'http://localhost:8888' 已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

Uncaught (in promise) TypeError: Failed to fetch

有没有办法绕过这个街区？

【问题讨论】：

如果该服务器没有响应标头，您唯一的选择是使用您自己的服务器代理。您遇到了无法解决的浏览器安全功能。
1) 我在哪里可以阅读有关使用服务器代理的更多信息（在我的问题的上下文中），以便我更好地理解您的意思？ 2) 这在 JS 中是什么样子的？ @Pointy
基本上你需要在你控制的服务器上的代码，你的页面可以访问。您的服务器端代码将转身向您的目标站点发出 HTTP 请求。在这种情况下，没有人会关心 CORS 标头。代码可以是你想要的任何编程语言。
如果你想坚持使用 JS，我可以提供一个简单的 nodejs 示例，或者你可以使用 github.com/ccoenraets/cors-proxy 之类的东西
在stackoverflow.com/questions/43871637/…查看答案的如何使用CORS代理来解决“No Access-Control-Allow-Origin header”问题部分

标签： javascript csv d3.js promise cors

【解决方案1】：

获取文件并从与脚本运行相同的来源提供文件将是最容易的。例如。 PHP 很少关心 CORS（假设这个文件偶尔会改变）。如果它没有改变，即使手动放置它就足够了。

让服务器端脚本获取文件，然后将其作为同源提供，而不缓存它：

<?php
    $url = "https://stats.oecd.org/Index.aspx?DataSetCode=WILD_LIFE";
    header("Content-type: text/csv");
    echo file_get_contents($url);
?>

任何服务器端脚本语言都应该能够做到这一点；我使用 PHP 只是为了提供一个示例。可以将WILD_LIFE 设为变量，以便它可以用于获取任何数据集。

【讨论】：

它以 Uncaught TypeError: d3.csv(...).header is not a function 响应，然后吐出相同的 cors 信息。 @Martin Zeitler
不能从客户端添加header；它必须在服务器上完成。
是的，客户端阻止它，但它这样做是因为 HTTP 响应不包含所需的标头。
@MartinZeitler 您链接的文档说：“默认情况下，大多数浏览器不允许跨域请求。要启用跨域请求，让服务器设置header Access-Control-Allow-Origin: *" Bold mine.
获取文件并从与脚本运行相同的来源提供文件将是最容易的。例如。 PHP 很少关心 CORS（假设这个文件偶尔会改变）。