javascript 通过修改 HTTP 标头使用没有 CORS 的 XMLHttpRequest?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14667512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using XMLHttpRequest without CORS by modifying HTTP headers?
提问by baptx
I'm doing some tests with the (deprecated) Twitter API 1.0
我正在使用(已弃用的)Twitter API 1.0 进行一些测试
For example, I want to get data from the API, client-side using AJAX browser requests from any cross-origin webpage. It can be a new blank tab, a local HTML page or any existing website.
例如,我想从 API 获取数据,客户端使用来自任何跨源网页的 AJAX 浏览器请求。它可以是新的空白选项卡、本地 HTML 页面或任何现有网站。
I've tried JSONP, it works great but I would like to use the default XMLHttpRequest even if Twitter servers do not support CORS http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing.
我试过 JSONP,效果很好,但即使 Twitter 服务器不支持 CORS http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing,我也想使用默认的 XMLHttpRequest 。
On google.com homepage for example, I create a simple AJAX call to Twitter API that I execute with Firebug:
例如,在 google.com 主页上,我创建了一个对 Twitter API 的简单 AJAX 调用,并使用 Firebug 执行该调用:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.twitter.com/1/friends/ids.json?screen_name=baptx", false);
xhr.send();
This will not work and print an error on Firebug due to the same origin policy:
由于同源策略,这将不起作用并在 Firebug 上打印错误:
Error: Failure
xhr.send();
It returns an HTTP 200 OK code but no JSON data has been received from the server.
它返回一个 HTTP 200 OK 代码,但没有从服务器收到 JSON 数据。
I've seen two differences between a request from a google.com webpage and the api.twitter webpage (who works for Twitter API requests since it's the API domain name, same origin).
我已经看到来自 google.com 网页的请求和来自 api.twitter 网页的请求之间的两个差异(它适用于 Twitter API 请求,因为它是 API 域名,同源)。
An Origin HTTP header has been added with the current domain name:
添加了一个带有当前域名的 Origin HTTP 标头:
Origin https://www.google.com
The Referer HTTP header is not https://api.twitter.com/like a request from api.twitter.com page but is in my case:
Referer HTTP 标头不是 https://api.twitter.com/像来自 api.twitter.com 页面的请求,但在我的情况下是:
Referer https://www.google.com/webhp?hl=en
That's why I've tried to remove the Origin HTTP header and modify the current Referer HTTP header to https://api.twitter.com/
这就是为什么我尝试删除 Origin HTTP 标头并将当前 Referer HTTP 标头修改为https://api.twitter.com/
I've done this with the Firefox ModifyHeaders extension and it works, I can check in Firebug "Net" tab that those changes were made correctly.
我已经使用 Firefox ModifyHeaders 扩展完成了这项工作并且它有效,我可以在 Firebug“Net”选项卡中检查这些更改是否正确进行。
Now, I have the SAME request header from a request coming from google.com webpage and api.twitter.com webpage. It will still fail to do an AJAX request from another domain than the API, even if the HTTP headers are overwritten, why?
现在,我有来自 google.com 网页和 api.twitter.com 网页的请求的相同请求标头。它仍然无法从 API 以外的其他域执行 AJAX 请求,即使 HTTP 标头被覆盖,为什么?
By the way, do you know why an AJAX request to Twitter API from Firefox "New Tab" will work?
顺便说一句,您知道为什么从 Firefox “New Tab” 向 Twitter API 发出 AJAX 请求会起作用吗?
回答by baptx
If web servers don't allow Cross-origin resource sharing, we have to manually add the HTTP response header Access-Control-Allow-Origin: *
如果 web 服务器不允许跨域资源共享,我们必须手动添加 HTTP 响应头 Access-Control-Allow-Origin:*
I thought the problem was in request headers. There was no Firefox addon to modify HTTP response headers, only request headers are supported by ModifyHeaders or TamperData: Modifying HTTP response headers in Firefox
我认为问题出在请求标头中。没有 Firefox 插件来修改 HTTP 响应头,只有 ModifyHeaders 或 TamperData 支持请求头: 在 Firefox 中修改 HTTP 响应头
My question was in fact similar to this one: Can I disable SOP (Same Origin Policy) on any browser for development?
我的问题实际上类似于这个问题:我可以在任何浏览器上禁用 SOP(同源策略)进行开发吗?
Solutions: Someone has developped a Firefox addon to force CORS: https://addons.mozilla.org/en-US/firefox/addon/forcecors/. Or we can use GM_xmlhttpRequest in a GreaseMonkey script, it will bypass the same origin policy of XMLHttpRequest. In Chrome, there is no addon to modify HTTP request/response headers like you want since the browser does not provides APIs, but there is a flag to disable SOP (--disable-web-security)
解决方案:有人开发了一个 Firefox 插件来强制 CORS:https://addons.mozilla.org/en-US/firefox/addon/forcecors/。或者我们可以在 GreaseMonkey 脚本中使用 GM_xmlhttpRequest,它会绕过 XMLHttpRequest 的同源策略。在 Chrome 中,没有插件可以像你想要的那样修改 HTTP 请求/响应标头,因为浏览器不提供 API,但是有一个标志来禁用 SOP (--disable-web-security)