向 Panasonic IP cam 发送“GET”请求以控制 PTZ 移动 - 被 CORS 阻止

Question

请原谅我的无知，我是 Java、HTML 和 Web 开发的新手。

我正在尝试构建一个网络应用程序来控制 IP 摄像机 (Panasonic AW-HE50) 的 PTZ 控件。我可以根据规格表通过浏览器向它发送基本命令： https://eww.pass.panasonic.co.jp/pro-av/support/content/guide/DEF/HE50_120_IP/HDIntegratedCamera_InterfaceSpecifications-V1.05E.pdf

例如，我可以通过在浏览器中输入http://172.16.14.90/cgi-bin/aw_ptz?cmd=%23P99&res=1 来让它开始旋转。

现在我只是想把它翻译成 Java，这样当你按下网页上的一个按钮时，它会发出一个“GET”请求，将相机移动到某个方向。

目前我的代码如下所示：

$(document).ready(function(){
  $("button").click(function(){
    $.get(camURL + "T99&res=1", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});

但是消息没有到达摄像头，Chrome 控制台显示：

“从源 'http://172.16.14.12' 访问 XMLHttpRequest 在 'http://172.16.14.90/cgi-bin/aw_ptz?cmd=%23T99&res=1' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”

我对此进行了一些研究，但解决方案似乎与服务器更相关。据我所知，我不能允许访问域，因为它是 IP 摄像头，而不是服务器。另外，我在同一个本地网络上托管了我的 HTML 页面来解决这个问题，但它没有用。我很惊讶它没有被识别为同一个域。我也不确定为什么浏览器能够发出这个 get 请求而 Java 脚本却不能。

提前感谢您的帮助，再次为我的无知感到抱歉。

安迪

Answer 1

这是一个典型的同源策略问题，有两种方法可以解决：

• 破解 IP 摄像头并在其中托管 HTML 页面。
• 将 HTTP-request-to-IP-camera 代码从网页移动到 Java 服务器，从而避免同源策略限制。

通常情况下，第二种方式更好，尤其是当您可以将 Java 服务器与 IP 摄像机放在同一个本地网络中时。以下是一些详细说明：

1. 在 Java 服务器中托管 HTML 页面和 JavaScript 代码（我相信您已经这样做了）。
2. 当用户单击网页上的按钮时，将 Ajax 请求发送到 Java 服务器，而不是 IP 摄像机。因此，避免同源问题。
3. 当Java服务器接收到上述HTTP请求时，解释用户操作并向IP摄像头发送相应的HTTP请求。由于这是一个纯服务器端 HTTP 请求，它不遵循同源策略。
4. Java 服务器收到 IP 摄像头的响应后，将该响应返回给浏览器。

顺便说一句，在上述场景中，Java 服务器扮演代理的角色。

对于您的一些问题：

“我对此进行了一些研究，但解决方案似乎与服务器更相关。”

-- 是的，CORS 策略是一种用于安全保护的浏览器功能。要解决此问题，您需要在服务器中执行一些操作。

“我在同一个本地网络上托管了我的 HTML 页面来解决这个问题，但它不起作用。我很惊讶它没有被识别为同一个域。” p>

-- 要将 2 个 URL 作为同一个域（从 CORS 的角度来看），以下 URL 部分应该相同：协议、主机名和端口。将 2 台机器移动到同一个本地网络不满足浏览器的同源策略。

“我也不确定为什么浏览器能够发出这个 get 请求，而 Java 脚本却不能。”

-- 当您在浏览器的地址栏中键入 IP 摄像机 URL 并按回车键时，将向摄像机发送一个简单的普通 HTTP GET 请求，不应用同源策略。但是，当您从 JavaScript 代码发送 HTTP 请求时，出于安全原因，浏览器会检查 CORS 设置。