设置 HTTP 获取标头 Javascript

Posted 2023-03-04

【中文标题】设置 HTTP 获取标头 Javascript

【英文标题】：Set HTTP Get Headers Javascript

【发布时间】：2016-03-11 18:08:06

【问题描述】：

我正在从与发送 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

谢谢

【问题讨论】：

@JaromandaX 我是两者的所有者，我添加的内容见上文

@JaromandaX 我虽然将 .htaccess 放在第一个目录中，但它是否也适用于所有子目录？我怎样才能确定？

您必须在 /test/inside/ 文件夹中允许跨源才能这样做，您必须修改该文件夹中的配置文件

@JayMar 好的，不是更高的目录也允许它在更低的目录中吗？你说配置文件的意思是修改我的httpd.conf吗？

如果您使用的是 apache，请查看***.com/questions/34109354/cross-domain-pdf-loading/…

【参考方案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

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

【讨论】：

那不起作用，我的 .htaccess 只包含您在上面发布的内容以及我在我的问题中发布的两行您没有的内容，文件匹配是否意味着它只会接受来自 .php 文件？我是从 javascript 发送的？

@spenf10 更改您的允许方法添加选项，因为它很重要，然后再试一次让我知道

这也不起作用，我在上面的.htaccess中有那些，我也尝试过获取url2，但我得到了错误，还有什么可能导致子目录的问题?

您的第二个请求没有标头来源，请在请求中添加标头，然后它将起作用。来源：sending-server.com

对，但我怎样才能添加该标题？ Origin:sending-server.com 去哪里了？