如何使用嵌入式网络摄像头 PTZ CGI 命令停止 CORS 错误

问题描述

升级到新的网络摄像头后，我不得不将控制网络摄像头上 PTZ 的代码更改为:

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
    });
}

现在我在控制台中收到此错误:跨源请求被阻止:同源策略不允许在 http://192.168.1.111:81/decoder_control.cgi?command=0&user=user&pwd=password.(原因:CORS 请求没有成功.2"

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"

当我在浏览器窗口中使用 CGI 命令粘贴 URL 时，一切正常.我读了这个解决方案 stackflow 解决方案 但我不明白或不知道如何实现它.我不使用节点或 js 只是 html 和 javascript.我需要在我的网页中添加什么来阻止这个错误?

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?

推荐答案

基于来自 shaochuancs .我找到了一个小型代理服务器 proxy.js，这消除了 CORS 错误.

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.

改变了我的功能:

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

致:

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

这里是 proxy.js 代码在同一个 web 服务器上与 node 一起运行.是固定的！

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 + '
');

  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('	-> Request Headers: ', options);
    console.log(' ');
    console.log('	-> 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('	-> 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(' ') + ':

Error ' + serverResponse.statusCode + '
' + stringifiedHeaders);
      break;
    }

    console.log('

');
  });
  req.pipe(connector, {end:true});
  req.resume();
});

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

这篇关于如何使用嵌入式网络摄像头 PTZ CGI 命令停止 CORS 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！