这个跨域ajax请求是如何工作的？

发布于 2024-12-26 02:08:18 字数 938 浏览 1 评论 0原文

我正在查看这个问题及其中是 http://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/ 其中包含以下代码：

var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "6528448c258cff474ca9701c5bab6927");
// Get your own key: http://api.imgur.com/

// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
    // Big win!
    // The URL of the image is:
    JSON.parse(xhr.responseText).upload.links.imgur_page;
 }
 // Ok, I don't handle the errors. An exercice for the reader.
 // And now, we send the formdata
 xhr.send(fd);

这个跨域请求如何工作？我认为通常存在安全限制来阻止人们这样做。

原文

I'm looking at this question and in it is a link to http://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/ which has the following code:

var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "6528448c258cff474ca9701c5bab6927");
// Get your own key: http://api.imgur.com/

// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
    // Big win!
    // The URL of the image is:
    JSON.parse(xhr.responseText).upload.links.imgur_page;
 }
 // Ok, I don't handle the errors. An exercice for the reader.
 // And now, we send the formdata
 xhr.send(fd);

How does this cross domain request work? I thought as a rule there are security restrictions that stop people from doing just this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

飘逸的'云 2025-01-02 02:08:18

服务器正在响应 Access-Control-Allow-Origin 设置以允许跨域请求

Response Headers
Access-Control-Allow-Origin: *  
Cache-Control   max-age=604800
Connection  keep-alive
Content-Length  494
Content-Type    application/json

http://hacks.mozilla.org/2009/07/cross-站点 xmlhttprequest-with-cors

The server is reponding with the Access-Control-Allow-Origin set to allow cross domain requests

Response Headers
Access-Control-Allow-Origin: *  
Cache-Control   max-age=604800
Connection  keep-alive
Content-Length  494
Content-Type    application/json

http://www.w3.org/TR/cors/#access-control-allow-origin-response-hea

http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors

回复收藏 0 原文

南城追梦 2025-01-02 02:08:18

Imgur 实现了跨域资源共享（CORS）。

CORS 标准的工作原理是添加新的 HTTP 标头，允许服务器
为允许的源域提供资源。浏览器支持这些
标头并执行它们建立的限制。另外，对于
可能对用户数据造成副作用的 HTTP 请求方法（在
特别是对于除 GET 之外的 HTTP 方法，或者用于 POST 的使用
某些 MIME 类型），该规范要求浏览器
“预检”请求，从服务器请求支持的方法
带有 HTTP OPTIONS 请求标头，然后经过“批准”
服务器，用实际的 HTTP 请求发送实际的请求
方法。服务器还可以通知客户端是否“凭证”
（包括 Cookie 和 HTTP 身份验证数据）应与
请求。

请参阅http://hacks.mozilla.org/2009/07 /cross-site-xmlhttprequest-with-cors/ 了解更多信息。