Sending "GET" requests to Panasonic IP cam to control PTZ movement - blocked by CORS

Question

Please forgive my ignorance, I am new to java, HTML and web development.

I'm trying to build a web app to control PTZ controls of an IP camera (Panasonic AW-HE50). I am able to send it basic commands through the browser as per the spec sheet: https://eww.pass.panasonic.co.jp/pro-av/support/content/guide/DEF/HE50_120_IP/HDIntegratedCamera_InterfaceSpecifications-V1.05E.pdf

For example I can make it start spinning by typing in http://172.16.14.90/cgi-bin/aw_ptz?cmd=%23P99&res=1 in to the browser.

Now I'm just trying to translate this over to Java, so that when you press a button on the web page, it makes a "GET" request to move the camera in a certain direction.

My code in question at the moment looks like this:

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

However the message doesn't reach the cam, and the Chrome console reads:

"Access to XMLHttpRequest at 'http://172.16.14.90/cgi-bin/aw_ptz?cmd=%23T99&res=1' from origin 'http://172.16.14.12' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have done some research in to this, but the solutions seem to be more relevant to servers. As far as I know, I cannot allow access to a domain, as it is an IP cam, not a server. Also, I hosted my HTML page on the same local network to get around this but it didn't work. I'm surprised that it isn't recognised as the same domain. I am also unsure as to why the browser is able to make this get request but the Java script is not.

Thanks in advance for your help, and sorry again for my ignorance.

Andy

Answer 1

This is a typical same-origin-policy problem, and there are 2 ways to fix it:

• Hack the IP camera and host the HTML pages there.
• Move the HTTP-request-to-IP-camera code from web page to Java server, and thus avoid the same-origin-policy limit.

Normally, the 2nd way is better, especially when you can put Java server in the same local network with IP camera. Here are some detail description:

1. Host HTML page and JavaScript code in Java server (I believe you've already done that).
2. When user click button on web page, send Ajax request to Java server, not the IP camera. Thus, avoid same-origin problem.
3. When Java server receives the above HTTP request, interpret the user operation and send corresponding HTTP request to the IP camera. As this is a pure server side HTTP request, it does not follow same-origin policy.
4. After the Java server receives response from IP camera, return that response to browser.

BTW, in the above scenario, the Java server takes the role of proxy.

For some of your questions:

"I have done some research in to this, but the solutions seem to be more relevant to servers."

-- Yes, CORS policy is a browser feature for security protection. To fix the problem, you need to do something in server.

"I hosted my HTML page on the same local network to get around this but it didn't work. I'm surprised that it isn't recognised as the same domain."

-- To make 2 URLs as same domain (in CORS point of view), the following URL part should be identical: protocol, hostname and port. Move 2 machines to the same local network does not satisfy same-origin policy for browser.

"I am also unsure as to why the browser is able to make this get request but the Java script is not."

-- When you type IP camera URL in the browser's address bar and press return, a simple normal HTTP GET request is sent to camera, no same-origin policy is applied. However, when you send HTTP request from JavaScript code, browser will check CORS settings for security reason.