在 Safari 8 中尝试从 CloudFront URL 加载图像时出现以下错误:
跨源资源共享策略拒绝跨源图像加载。
这只发生在 Safari 8 上。在最新的 FireFox 38 和 Chrome 41 中它加载得很好。 (Mac 10.10)
<强>1。具有以下 CORS 配置的 S3 存储桶
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
<强>2。链接的 CloudFront 分配
以下 header 已列入白名单(在行为下):
访问控制请求 header 访问控制请求方法来源<强>3。 JavaScript
var img = new Image();
img.crossOrigin = '';
img.onload = function() {
console.log('image loaded');
}
<强>1。检查从 curl 返回的 header
图像返回正确的 header (特别是 Access-Control-Allow-Origin)
> curl -sI -H 'Origin: localhost' -H 'Access-Control-Request-Method: GET' http://foo.cloudfront.com/image.jpg
...
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
X-Cache: Hit from cloudfront
2.在浏览器中检查返回的 header
有趣的是，图像在所有三个浏览器中都没有返回 Access-Control-Allow-Origin: * header 。为什么会这样？
<强>3。向 URL 添加查询字符串
向正在加载的 URL 添加查询字符串(例如？foo)将导致在浏览器中返回 Access-Control-Allow-Origin header ，并允许将图像加载到苹果浏览器!这很好，但为什么添加查询字符串允许它工作(并返回 Access-Control-Allow-Origin header )？
<强>4。从 S3 存储桶(未绑定(bind)到 CloudFront 分配)加载图像
从另一个未绑定(bind)到 CloudFront 的存储桶(具有相同的 CORS 配置)加载图像在 Safari 中也能正常工作。
这最初让我相信这是一个特定的 CloudFront 问题，但上面关于查询字符串的观点让我不这么认为。
这让我彻底崩溃了。任何人都可以帮助阐明以上内容吗？
感谢您的回复。令人沮丧的是，我似乎无法复制这个问题。
下面是一个片段，它加载了两个图像(一个来自 S3 存储桶，另一个来自其各自的 Cloudfront 分布)并且它们似乎都可以很好地加载您期望的 header ，这与我在上面所说的相反第 2 点。
不幸的是，我并没有真正接近确定的答案，但现在我只是代表我将其归结为一个错误，可能会按照 Derek 的建议在我的 CORS 设置之前请求图像。
var img, imgCloudfront;
img = new Image();
img.crossOrigin = '';
img.onload = function() {
$('body').append('image loaded<br>');
}
img.src = 'http://sandbox-robinpyon.s3.amazonaws.com/test.jpg';
imgCloudfront = new Image();
imgCloudfront.crossOrigin = '';
imgCloudfront.onload = function() {
$('body').append('image (cloudfront) loaded<br>');
}
imgCloudfront.src = 'http://d32d4njimxij7s.cloudfront.net/test.jpg';<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
最佳答案
仔细检查您的云端行为设置。您是否添加了自定义 header Origin。它应该是 Access-Control-Allow-Origin。我最近也设置了云端，发现这篇文章很有帮助:http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html
我在清除云端缓存时遇到了问题。如果您在 CORS 设置之前请求了图像，cloudfront 可能只会返回之前的内容，因此不会反射(reflect)您的新配置。您可以尝试运行失效，它是云端行为选项卡之一。我得到了与此不一致的结果。如果您想确保它正常工作，请上传一张新图片并进行测试。我正在使用 Rails，有时我会提高一个 Assets 版本，这会导致我所有的 Assets 都有一个新的指纹，这解决了缓存问题，因为每个文件都有一个新名称。)
关于您关于查询字符串的问题。您可能从云端遇到了缓存未命中。您可以尝试使用 curl 重复练习以查看响应 X-Cache: Hit from cloudfront 是否存在。在云端行为设置中，有一个“转发查询字符串”的配置。这可能是一个因素。
在我的设置中，我有一个中间 varnish 缓存，所以我也不得不处理它以确保所有 header 都通过。您似乎没有，但需要注意。
关于javascript - 无法在 Safari 中加载跨源图像(来自 CloudFront)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29418465/
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
我在pry中定义了一个函数:to_s，但我无法调用它。这个方法去哪里了，怎么调用？pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后，我认为我得到了正确的答案:这个方法用在什么地方？在irb或pry中定义方法时，会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)
我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类
当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub
GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'