跨原点资源共享原型JS

Question

我在Cross Origin Resource Sharing和Prototype中遇到了一些麻烦。我有一个简单的发布请求到外国资源，并且对于简单的发布请求，有一些必须满足的规则：

Content-Type必须位于application/x-www-form-urlencoded，multipart/form-data或text/plain，一个简单的请求不会使用http请求设置自定义标头，并且服务器必须将Access-Control-Allow-Origin标头设置为正确。

与香草JavaScript XMLHttpRequest一切正常，但与PrototypeJS它不会工作，因为它接缝Prototype设置一些自定义标题，我不知道如何防止它。

我通过尝试在原型：

new Ajax.Request('some.foreign-host.com/res.php', { 
    method: 'post', 
    postBody: 'foo=bar', 
    contentType: 'application/x-www-form-urlencoded', 
    onSuccess: function(e){ 
    // some custom code 
    } 
}); 

不知道如何拿到的样机送这样一个简单的CORS请求？

---

我有一个简单的的JavaScript的XMLHttpRequest创建的头的转储：

POST /bthesis/returnJSON.php HTTP/1.1  
Host: foreign-host.com       
Connection: keep-alive     
Referer: this-host.com 
Content-Length: 9       
Origin: this-host.com  
Content-Type: application/x-www-form-urlencoded; charset=UTF-8 
Accept: */*        
User-Agent: [...] 
Accept-Encoding: gzip,deflate,sdch  
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

，并通过原型请求创建的头：

OPTIONS /bthesis/returnJSON.php HTTP/1.1 
Host: foreign-host.com       
Connection: keep-alive     
Referer: this-host.com 
Access-Control-Request-Method: POST  
Origin: this-host.com  
Access-Control-Request-Headers: X-Prototype-Version, X-Requested-With, Content-type, Accept 
Accept: */*        
User-Agent: [...] 
Accept-Encoding: gzip,deflate,sdch  
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

原型使用一个完全不同的头文件集......这会导致控制台中出现以下错误：

XMLHttpRequest无法加载foreign-host.com/bthesis/returnJSON.php。 Access-Control-Allow-Headers不允许请求标头字段X-Prototype-Version。 不肯不安全头“X-JSON”

奇怪的是，在这两种情况下，Web服务器返回所请求的资源（我看到它的“资源” Chrome浏览开发者控制台的），但它接缝该原型不能访问它在某种程度上

Answer 1

也许你可以设置原点头自己在Ajax请求，像这样

new Ajax.Request('some.foreign-host.com/res.php', { 
    method: 'post', 
    postBody: 'foo=bar', 
    requestHeaders: {Origin: 'http://www.my.local-host.com'} 
    contentType: 'application/x-www-form-urlencoded', 
    onSuccess: function(e){ 
     // some custom code 
    } 
}); 

从来没有尝试过自己，但... 与原型版本，会发生什么？请求是否被发出，然后什么也没有返回，或者是被丢弃的响应，或者是什么？

Answer 2

请看看这里的预检https://developer.mozilla.org/En/HTTP_access_control

你的问题是，FX是反应到自定义页眉（X -...）和将触发预检。 您需要让服务器返回OPTIONS和POST的所有访问控制标题，并让它允许自定义标题。

Answer 3

我遇到同样的问题。共享链接@mplungjan包含了答案：

您只需让浏览器知道x-json头是使用access-control-expose-headers

我使用Ruby的这一行on Rails的控制器安全

headers['Access-Control-Expose-Headers'] = 'x-json' 

（这应该是很容易转换成其他编程语言:)）

更多细节在这个page

Answer 4

我在other SO question找到解决方案。它适用于我 - details are here。

概括起来 - 你需要在你Ajax.RequestonCreate事件，消除非标头：

onCreate: function(response) { // here comes the fix 
     var t = response.transport; 
     t.setRequestHeader = t.setRequestHeader.wrap(function(original, k, v) { 
      if (/^(accept|accept-language|content-language)$/i.test(k)) 
       return original(k, v); 
      if (/^content-type$/i.test(k) && 
       /^(application\/x-www-form-urlencoded|multipart\/form-data|text\/plain)(;.+)?$/i.test(v)) 
       return original(k, v); 
      return; 
     }); 
    }