How can I stop CORS Error with embedded webcam PTZ CGI command [duplicate]

问题

After upgrading to a new webcam I had to change my code that controls the PTZ on the web cam to:

 function buttonDown(button) {
  document.getElementById("status").innerHTML = "button " + button.id + " pressed";
  $.get("http://192.168.1.111:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&user=user&pwd=pass", function() {
        //on successful call
    }); 
}

Now I get this error in the console: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.111:81/decoder_control.cgi?command=0&user=user&pwd=password. (Reason: CORS request did not succeed). 2"

When I paste the URL with the CGI command in the browser windows everything works fine. I read this solution stackflow solution but I dont understand or know how to implement it. Im not using node or js just html and javascript. What do I need to add to my web page to stop this error?

回答1:

Found and easy solution based on the similiar stackoverflow answer from shaochuancs . I found a small proxy server proxy.js and this eliminates the CORS error.

Changed my function from:


function cam_down()
{
    $.get("http://192.168.1.111:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&usr=user&pwd=pass&", function() {
    });

To:

function cam_down()
{
    $.get("http://localhost:9100/http://192.168.1.111:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&usr=user&pwd=pass&", function() {
    });

Here is the proxy.js The code is run with node on the same webserver. Yay Fixed !

// Simple proxy/forwarding server for when you don't want to have to add CORS during development.

// Usage: node proxy.js
//    Open browser and navigate to http://localhost:9100/[url]
//      Example: http://localhost:9100/http://www.google.com

// This is *NOT* for anything outside local development. It has zero error handling among other glaring problems.

// This started as code I grabbed from this SO question: http://stackoverflow.com/a/13472952/670023

var url = require('url')
  , http = require('http')
  , https = require('https');

var PORT = process.argv[2] || 9100;

var server = http.createServer(function(req, res) {
  var reqUrl = req.url.substr(1);
  console.log('==> Making req for' + reqUrl + '\n');

  req.pause();

  var options = url.parse(reqUrl);
  options.headers = req.headers;
  options.method = req.method;
  options.agent = false;

  options.headers['host'] = options.host;

  var connector = (options.protocol == 'https:' ? https : http).request(options, function(serverResponse) {
    console.log('<== Received res for', serverResponse.statusCode, reqUrl);
    console.log('\t-> Request Headers: ', options);
    console.log(' ');
    console.log('\t-> Response Headers: ', serverResponse.headers);

    serverResponse.pause();

    serverResponse.headers['access-control-allow-origin'] = '*';

    switch (serverResponse.statusCode) {
      // pass through.  we're not too smart here...
      case 200: case 201: case 202: case 203: case 204: case 205: case 206:
      case 304:
      case 400: case 401: case 402: case 403: case 404: case 405:
      case 406: case 407: case 408: case 409: case 410: case 411:
      case 412: case 413: case 414: case 415: case 416: case 417: case 418:
        res.writeHeader(serverResponse.statusCode, serverResponse.headers);
        serverResponse.pipe(res, {end:true});
        serverResponse.resume();
      break;

      // fix host and pass through.  
      case 301:
      case 302:
      case 303:
        serverResponse.statusCode = 303;
        serverResponse.headers['location'] = 'http://localhost:'+PORT+'/'+serverResponse.headers['location'];
        console.log('\t-> Redirecting to ', serverResponse.headers['location']);
        res.writeHeader(serverResponse.statusCode, serverResponse.headers);
        serverResponse.pipe(res, {end:true});
        serverResponse.resume();
      break;

      // error everything else
      default:
        var stringifiedHeaders = JSON.stringify(serverResponse.headers, null, 4);
        serverResponse.resume();
        res.writeHeader(500, {
          'content-type': 'text/plain'
        });
        res.end(process.argv.join(' ') + ':\n\nError ' + serverResponse.statusCode + '\n' + stringifiedHeaders);
      break;
    }

    console.log('\n\n');
  });
  req.pipe(connector, {end:true});
  req.resume();
});

console.log('Listening on http://localhost:%s...', PORT);
server.listen(PORT);

来源：https://stackoverflow.com/questions/58947312/how-can-i-stop-cors-error-with-embedded-webcam-ptz-cgi-command

标签

javascript

get

cors