设置 HTTP 获取标头 Javascript

Question

我正在从与发送 GET 的服务器不同的服务器检索图像文件，我得到两个文件，一个位于另一台服务器上 /var/www/html/test/image1.png，另一个文件位于 /var/www/html/test/inside/image2.png 我得到像这样的文件。我知道网址 http://xxx.xxx.xx/test/image1.png 和 http://xxx.xxx.xx/test/inside/image2.png 然后我这样做

function convertToDataURLviaCanvasBOTH(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null; 
};
img.src = url;
}

url1 = http://xxx.xxx.xx/test/image1.png;
url2 = http://xxx.xxx.xx/test/inside/image2.png

data1 = convertToDataURLviaCanvasBOTH(url1);
data2 = convertToDataURLviaCanvasBOTH(url2);

data1 效果很好，我把它拿回来了，但是当它厌倦了url2 它失败了，我得到了错误

Image from origin 'http://xxx.xx.xx.x' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sending-server.com' is therefore not allowed access.

当第二个只是在第一个的子文件夹中时，为什么它对第一个而不是第二个有效？

在根文件目录我也有

Header always set Access-Control-Allow-Origin "http://sending-server.com"
Header always set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header always set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

在 .htaccess 文件中，该文件应始终发送标头

这里是 url1 的请求头

Accept:image/webp,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:192.67.64.41
If-Range:"1083f-52648757feb05"
Origin:http://sending-server.com
Range:bytes=2596-2596
Referer:http://sending-server.com/info.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36

以及来自 url2 的请求标头

Provisional headers are shown //THERE IS A WARING SYMBOL ON THIS LINE
Accept:image/webp,image/*,*/*;q=0.8
Origin:http://sending-server.com
Referer:http://sending-server.com/info.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:A760326C-C02F-41C6-A4F6-4B46AA7BC1C3

谢谢

Answer 1

我不知道您的 .htaccess 的确切设置，但 .htaccess 的正确设置是：

<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
     Header set Access-Control-Allow-Methods: POST, GET, OPTIONS
     ........
  </IfModule>
</FilesMatch>

在执行某些类型的跨域 AJAX 请求时，支持 CORS 的现代浏览器会插入一个额外的“预检”请求，以确定它们是否有权执行该操作。

OPTIONS /
Host: bar.com
Origin: http://foo.com

如果 bar.com 愿意接受该操作，它可能会以以下标头响应：

Access-Control-Allow-Origin: http://foo.com
Access-Control-Allow-Methods: PUT, DELETE

如果它不起作用，请告诉我