使用 PrototypeJS 进行跨域资源共享

Posted

技术标签:

【中文标题】使用 PrototypeJS 进行跨域资源共享【英文标题】:Cross Origin Resource Sharing with PrototypeJS 【发布时间】:2012-07-05 16:28:26 【问题描述】:

我在使用 Prototype Ajax 请求时遇到了一个常见的 CORS 问题。我用谷歌搜索了大约 2 个小时,但仍然无法解决问题。我尝试了不同的方法。没有什么帮助我。我需要在我的代码中设置 orgin、Access-Control-Allow-Origin 等。我参考了以下网站,但没有任何帮助。

http://kourge.net/node/131

Cross Origin Resource Sharing with PrototypeJS

new Ajax.Request("http://localhost:4000/somefolder/some.xml", 
    //new Ajax.Request(source, 
        asynchronous: false,
        method: 'get',
        contentType: 'text/xml',
        //requestHeaders: ('Access-Control-Allow-Origin', '*','Access-Control-Allow-Methods','GET','Access-Control-Max-Age','1000','Access-Control-Allow-Headers','*' ),
        //requestHeaders: (Access-Control-Allow-Origin, *,Access-Control-Allow-Methods,GET,Access-Control-Max-Age,1000,Access-Control-Allow-Headers,*),
        //onCreate: function(request)  
        //   request.transport.setRequestHeader = Prototype.emptyFunction; 
    // ,
    requestHeaders: Access: '*/*',
    onSuccess: function(result)    
        alert(result.responseXML);
    
); 

我收到以下回复:

Response Headersview source
Connection  keep-alive
Content-Length  0
Content-Type    text/html; charset=utf-8
Date    Thu, 05 Jul 2012 08:58:08 GMT
X-Powered-By    Express
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Request-He...    x-prototype-version,x-requested-with
Access-Control-Request-Me...    GET
Connection  keep-alive
Host    localhost:4000
Origin  http://localhost:8080
User-Agent  Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0

我将它作为GET 请求发送,但它作为OPTIONS 请求发送。


我也添加了标题作为响应。仍然没有帮助。

app.configure('development', function() 
    app.use(express.errorHandler( 
        dumpExceptions :true,
        showStack :true
    ));
    app.all('*', function(req, res, next)  
        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000, http://localhost:8000');
        res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
        res.setHeader('Access-Control-Allow-Headers', 'x-prototype-version,x-requested-with');
        res.setHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8');
        res.setHeader('Accept-Encoding', 'gzip, deflate');
        res.setHeader('Accept-Language', 'en-us,en;q=0.5');
        res.setHeader("X-Requested-With", "XMLHttpRequest" );
        res.setHeader("Orgin", 'http://localhost:4000'); 
        next()
    );
);

添加/反映的响应:

Response Headersview source

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Allow-Head...    x-prototype-version,x-requested-with
Access-Control-Allow-Meth...    GET,POST,PUT,DELETE
Access-Control-Allow-Orig...    http://localhost:4000, http://localhost:8000
Allow   GET,POST,PUT,DELETE,TRACE,CONNECT,PROPFIND,PROPPATCH,MKCOL,COPY,MOVE,LOCK,UNLOCK,VERSION-CONTROL,REPORT,CHECKOUT,CHECKIN,UNCHECKOUT,MKWORKSPACE,UPDATE,LABEL,MERGE,BASELINE-CONTROL,MKACTIVITY,ORDERPATCH,ACL,SEARCH,PATCH,PURGE
Connection  keep-alive
Content-Length  224
Content-Type    text/html; charset=utf-8
Date    Fri, 06 Jul 2012 06:20:51 GMT
Orgin   http://localhost:4000
X-Powered-By    Express
X-Requested-With    XMLHttpRequest

Request Headersview source

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Request-He...    x-prototype-version,x-requested-with
Access-Control-Request-Me...    GET
Connection  keep-alive
Host    localhost:4000
Origin  http://localhost:8080
User-Agent  Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0

我还能做些什么来解决这个问题?

【问题讨论】:

【参考方案1】:

Access-Control-Allow-Origin: * 需要是 response 标头的一部分,而不是请求标头(您的 Ajax 请求)。

您请求数据的服务器是授予/拒绝跨域脚本权限的服务器。

我会研究如何为您使用的任何服务器环境设置Access-Control-Allow-Origin

【讨论】:

我的应用程序(请求/orgin 服务器)在 Tomcat 的 8000 端口中运行。上面的xml是一个静态文件,由node+express(respondin server/host)在3000端口下发。它只是来自静态路径,即来自快速文件夹结构的公共文件夹。 我找到了解决方案。只需将 Prototype Ajax 调用更改为 jQuery Ajax 调用即可。并添加了“crossDomain: true” 如果... - 您想继续使用 Prototype 框架 - 并且您已经在服务器上配置了 Access-Control-Allow-Origin,允许 CORS 请求,... 有一个解决方案:@987654321 @

以上是关于使用 PrototypeJS 进行跨域资源共享的主要内容,如果未能解决你的问题,请参考以下文章

Angular 或 Angular 6 中的跨域资源共享 (CORS)。在 localhost 上使用不同端口进行跨域调用时出现问题

JAVA跨域资源访问CORSFilter

通过 AJAX 进行跨域资源共享 (CORS)

Javascript Ajax总结——跨域资源共享

跨域资源共享 - CORS

跨域