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

Question

我有一个 Arduino 服务器运行 IP 192.168.0.177。如果你去这个地址，它returns数据格式为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 sketch本身的部分代码是这样的：

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 应用程序，一切正常。 Localhost 有 http，没有 https，它向 http 服务器发送请求，所以一切正常。

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

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

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

Request from an external source is blocked: the single source Policy prohibits reading a remote resource on https://192.168.0.177/. (Reason: the CORS request failed).

我阅读了所有关于 CORS 的内容，他们到处都写到你需要将 header "Access-Control-Allow-Origin: *" 添加到服务器。但它一直在我的 Arduino 代码中。

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

Answer 1

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

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

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

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

构建

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

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

Getting JSON from the Arduino server. Problems with CORS

javascript

https

http

arduino

cors