允许Access-Control-Allow-Origin:*用纯JavaScript [英] Allow Access-Control-Allow-Origin: * in pure javascript

问题描述

因此，我一直在使用javascript开发一个有趣的在线图像效果程序，该程序中，用户输入图像的网址并点击输入"，然后在屏幕上绘制图像，然后用户可以运行某些效果在它上面，例如g代表灰度，b代表模糊，等等.

So I've been working on a fun, online image effect program in javascript where the user enters a url to an image and hits 'enter', the image is drawn on the screen, and then the user can run some effects on it, such as g for greyscale, b for blur, etc.

我的问题是控制台会打印出以下内容之一:

My problem is that the console prints out either:

原点重定向[origin]已被阻止加载 跨域资源共享策略:无访问控制-允许-起源" 标头出现在请求的资源上.原点"null"为 因此不允许访问.

Redirect at origin [origin] has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

或:

未捕获的SecurityError:无法在上执行'getImageData' 'CanvasRenderingContext2D':画布已被污染 跨域数据.

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我研究了许多有关此问题的答案，并在chrome浏览器中添加了一个扩展功能，该功能可实现跨域资源共享，并且我的网页运行良好(两次重载后).

I looked into many answers to this issue, and I added an extension to my chrome browser that enables cross-origin resource sharing, and my webpage runs fine (after a couple of reloads).

我发现的所有解决方案都需要在chrome中启用跨域资源共享选项，或者使用某种php和ajax调用来启用此选项. 自从我在jsbin上编写代码以来，我一直在寻找一种可以使用纯javascript完成的解决方案，，但我找不到任何可行的解决方案.如果您对可行的方法有任何想法，或者有没有解决方案的消息，那么我们将不胜感激.

All the solutions I found require either enabling the cross-origin resource sharing option in chrome, or using some sort of php and ajax calls to enable this option. Since I'm writing the code on jsbin, I'm looking specifically for a solution that can be done in pure javascript, and I haven't been able to find any that work. If you have any ideas on something that could work, or the news that there is no possible solution, any response would be appreciated.

我的代码:

var background, context, image;
var docwidth, docheight;

image = new Image();
image.src = $('#image-src').val();
image.crossOrigin = "anonymous";

docwidth = $(document).outerWidth(true);
docheight = $(document).outerHeight(true);

background = document.getElementById("background");
context = background.getContext("2d");

image.onload = function() {
  background.width = docwidth;
  background.height = docheight;
  context.drawImage(image,0,0,image.width,image.height, 0, 0, docwidth, docheight);
};

function change_image_src(src) {
  image.src = $('#image-src').val();
}

// ... more image effect functions ...

function grayscale() {
  var data = context.getImageData(0, 0, background.width, background.height);
  var pixels = data.data;

  for (var x = 0; x < data.width; x++)
    for (var y = 0; y < data.height; y++) {
      var i = (y * 4) * data.width + x * 4;
      var avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
      pixels[i] = avg;
      pixels[i + 1] = avg;
      pixels[i + 2] = avg;
    }
  context.putImageData(data, 0, 0, 0, 0, data.width, data.height);
}

$(document).keydown(function(e) {
  switch (e.which) {
    // ... other cases ...
    case 71: // g
      grayscale();
      break;
  }
});

顺便说一句，我确实有 image.crossOrigin ="anonymous";

Btw, I do have image.crossOrigin = "anonymous";

提前谢谢！

推荐答案

我能够使用CORS代理服务器解决此问题: http://crossorigin.me/

I was able to get over this problem using a CORS proxy server: http://crossorigin.me/

这篇关于允许Access-Control-Allow-Origin:*用纯JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！