从 Arduino 服务器获取 JSON。 CORS 的问题答案

【问题标题】：Getting JSON from the Arduino server. Problems with CORS从 Arduino 服务器获取 JSON。 CORS 的问题
【发布时间】：2020-11-06 02:06:19
【问题描述】：

我有一个在 IP 192.168.0.177 上运行的 Arduino 服务器。如果你去这个地址，它会返回 JSON 格式的数据。例如，在一个 React 应用程序中，我得到这个 JSON 是这样的：

const [data, setData] = useState([])
axios.get('http://192.168.0.177')
  .then((res) => setData(res.data))
  .catch((err) => console.log(err))

在 Arduino 草图本身的部分代码是这样的：

client.println("HTTP/1.1 200 OK");
client.println("Access-Control-Allow-Origin: *");
client.println("Access-Control-Allow-Methods: GET");
client.println("Content-Type: application/json");
client.println("Connection: close");
client.println();

client.println("[");
client.println("{ \"id\": 1, \"name\": \"John\" }, ");
client.println("{ \"id\": 2, \"name\": \"Paul\" } ");
client.println("]");

如果您在本地网络上运行 React 应用程序，一切正常。本地主机有http，而不是https，它向http服务器发送请求，所以一切正常。

当我在全球网络上启动我的 React 应用程序时，问题已经出现了。换句话说，地址是这样的：https://app.com。现在，如果我通过 https 向 Arduino 发送请求，控制台会写入一个错误，您无法将请求从 https 发送到 http。然后我更改了 React 代码中的查询，或者更确切地说只添加了 's'symbol:

axios.get('https://192.168.0.177')
               ^

然后还有一个与 CORS 相关的问题。控制台显示此错误：

来自外部来源的请求被阻止：单一来源政策禁止读取https://192.168.0.177/ 上的远程资源。（原因：CORS 请求失败）。

我阅读了有关 CORS 的所有内容以及他们所写的所有内容，您需要将标题“Access-Control-Allow-Origin: *”添加到服务器。但它一直在我的 Arduino 代码中。

对不起，我不太擅长这个，所以我在寻求帮助。我哪里做错了？

【问题讨论】：

您使用的是哪种 Arduino 硬件？什么样的服务器软件？直接在浏览器中打开 https://192.168.0.177 会看到什么？
@wschopohl，我正在使用带有以太网模块 W5500 的 Arduino UNO。在浏览器中打开这个ip地址，看到json数据：[ { "name": "john" }, { "name": "paul" } ]
但是你也可以通过httpS打开ip地址吗？？
@wschopohl，不
很抱歉给您带来“坏消息”。我扩展了我的答案，包括解决您的问题的三个解决方案。祝你的项目好运！

标签： javascript http https arduino cors

【解决方案1】：

据我了解，如果您没有“W5500 Ethernet Shield S”，这是一个安全增强版本，您将无法提供正确的 https 安全网站答案。

而且由于新的安全规则，每个现代浏览器都强制执行这将是一个问题。

如果您只在开发环境中需要它，您可以为您的浏览器使用特殊的启动标志，使其忽略这些限制。或者对于 Chrome 来说是这样的，例如： How to get Chrome to allow mixed content?

如果你在生产环境中需要这个，你可以在两者之间放置一个代理服务器，它在 arduino 上调用 http 并通过 https 转发请求。这样的服务器可以用树莓派构建。

但话又说回来，您可能只用一个覆盆子就可以构建整个设备。这甚至可能比 Arduino plus W5500 屏蔽更便宜，并为您提供更多选择。这些天，我个人用覆盆子构建了所有需要网络的东西，因为它给了我更多的选择。

【讨论】：