Question

我在我的图像服务器（maptile.org）上创建了一个.htaccess文件。

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

我使用a2enmod headers启用了mod-header 我测试了它已使用apachectl -M启用，并列出了headers_module (shared)

在问题中建议： Header set Access-Control-Allow-Origin in .htaccess doesn't work

然而，当我尝试将地图保存为图像时（使用html2canvas），它在控制台中出现错误 http://www.justicemap.org/?id=63

错误：

来自原作的图片＆＃39; http://maptile.org＆＃39;已被阻止加载通过跨源资源共享政策：没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://www.justicemap.org＆＃39;因此是不允许的访问。

当图像存储在justicemap.org域上时，“另存为图像”功能将起作用。

当我使用html2canvas时，请求方法为＆＃34; GET＆＃34;，响应状态代码为＆＃34; 200＆＃34;，mimeType为＆＃34; image / png＆＃34;。我没有看到Access-Control-Allow-Origin标题。

我是否需要添加Origin标头？当我在Chrome Javascript控制台中检查请求时，我没有看到一个。

Answer 1

原来我没有运行Apache。我在使用Lighttpd。我没有意识到这一点，因为Cloudflare将服务器标头替换为：Server:cloudflare-nginx。

我能够使用this recommendation配置Lighttpd。

Answer 2

我遇到了同样的问题并通过将crossOrigin选项设置为null来解决，如下所示：

layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM({
      url: 'http://tile-server-ip/osm/{z}/{x}/{y}.png',
      crossOrigin: null
    })
  })
],

.htaccess中启用的跨源资源共享不起作用

2 个答案: