jQuery跨域请求

Tejs

我正在尝试获得跨域请求才能工作。相关代码如下:

var promise = $.ajax({
    type: 'GET',
    url: registerUrl,
    dataType: 'json',
    cache: false,
    crossDomain: true,
    xhrFields: { withCredentials: true },
    contentType: 'application/json'
});

我控制呼叫和接收服务器,这是我得到的响应:

原始请求(由Fiddler提供):

OPTIONS http://localhost:5080/mportal/registerChat?gsid=abcde&ul=100,200&_=1405022169353 HTTP/1.1
Host: localhost:5080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:53054
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type
Connection: keep-alive

原始回应:

HTTP/1.1 200 OK
Date: Thu, 10 Jul 2014 19:56:11 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Content-Length: 0
Server: Jetty(8.1.4.v20120524)

现在,我的理解是,Allow-Origin: *对于此预检而言,Firefox / Chrome应该足以让请求继续进行。奇怪的是,IE不会对此请求进行预检,并且可以正常工作(尽管会发出警告,表明它未遵循CORS规范)。

我在这里想念什么吗?我尝试设置我能想到的ajax请求上的每个值,并且服务器看起来正在以对OPTIONS请求的适当响应进行响应。

来自firefox的特定错误消息:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5080/mportal/registerChat?gsid=abcde&ul=100,200&_=1405022169353. This can be fixed by moving the resource to the same domain or enabling CORS.

我究竟做错了什么?可以更改以解决此问题?

编辑:新的请求/响应字段:

OPTIONS http://localhost:5080/mportal/registerChat?gsid=abcde&ul=100,200&_=1405026511996 HTTP/1.1
Host: localhost:5080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:53054
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type
Connection: keep-alive

响应:

HTTP/1.1 200 OK
Date: Thu, 10 Jul 2014 21:08:38 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Credentials: true
Content-Length: 0
Server: Jetty(8.1.4.v20120524)

现在,提琴手还记录了实际的请求:

GET http://localhost:5080/mportal/registerChat?gsid=abcde&ul=100,200&_=1405026511996 HTTP/1.1
Host: localhost:5080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Referer: http://localhost:53054/
Origin: http://localhost:53054
Connection: keep-alive

以及响应:

HTTP/1.1 200 OK
Date: Thu, 10 Jul 2014 21:08:38 GMT
Content-Type: application/json;charset=ISO-8859-1
Content-Length: 175
Server: Jetty(8.1.4.v20120524)

{"status":true,"host":"<myServerName>","port":1935,"liveHost":"<myServerName>","livePort":5080,"gsid":"abcde","connCount":2,"maxConns":25000,"version":"1.0"}

但是,firefox似乎阻止了该请求,因此ajax调用总是命中我的失败处理程序。这似乎很奇怪...

冲上斜坡51

看起来您的请求正在请求发送内容类型请求标头的权限,并且它需要发送凭据的权限。

据我所知,您的请求标头似乎是正确的。但是,您的响应应包含两个以上的标头:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:content-type

这是来自我工作过的另一个站点的预检请求和预检响应的示例:

这是预检选项请求标头

Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, applicationname
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Cookie:*sanitized cookie data*
Host:sanitized.domain.com
Origin:https://sanitized.domain.com
Pragma:no-cache
Referer:https://sanitized.domain.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

随后是预检响应头:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:applicationname
Access-Control-Allow-Origin:https://sanitized.domain.com
Cache-Control:no-cache
Connection:keep-alive
Content-Length:0
Date:Thu, 10 Jul 2014 20:19:25 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

请注意,添加了Access-Control-Allow-Credentials和Access-Control-Allow-Header标头。还要注意,我的请求在Access-Control-Request-Headers标头中发送了“接受”,并且响应中不包含“接受”。这是因为“接受”被视为此处定义的简单标头:http : //www.w3.org/TR/cors/#simple-header此外,仅当content-type的值是以下值之一时,它才可以作为简单标头:

  • 文字/纯文字
  • 多部分/表单数据
  • 应用程序/ x-www-form-urlencoded

在您的情况下,由于内容类型为application / json,因此需要一个包含“ content-type”的响应标头,如上所示。

更新:在预检请求之后发生的请求和响应应包含相同的CORS标头,以防止浏览器拒绝请求和/或响应。至少需要让响应包含Access-Control-Allow-Credentials和Access-Control-Allow-Origin标头。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery插件的跨域请求

来自分类Dev

使用JQuery的JSON Get请求(跨域)

来自分类Dev

跨域请求被阻止

来自分类Dev

跨域请求被阻止:

来自分类Dev

什么是跨域请求

来自分类Dev

跨域请求被阻止

来自分类Dev

跨域jQuery.Ajax请求-Chrome扩展

来自分类Dev

jQuery跨域AJAX请求失败,XMLHttpRequest无法加载错误

来自分类Dev

Phonegap Jquery移动跨域ajax请求不起作用

来自分类Dev

如何使用jquery进行跨域ajax发布请求?

来自分类Dev

jQuery跨域请求JSON:无法读取null的属性“ json”

来自分类Dev

jQuery的跨域问题

来自分类Dev

AngularJS的跨域$ http请求

来自分类Dev

跨域$ http请求AngularJS

来自分类Dev

Wikipedia API +跨域请求

来自分类Dev

禁用跨域Ajax请求

来自分类Dev

PHP跨域请求被阻止

来自分类Dev

跨域请求阻止的Elasticsearch

来自分类Dev

跨域请求阻止Laravel

来自分类Dev

防止跨域 websocket 请求

来自分类Dev

AJAX请求跨域请求被阻止错误

来自分类Dev

从JQuery调用WCF服务:跨域OPTIONS请求给出错误400

来自分类Dev

使用phantom.js中的jQuery发送跨域ajax请求

来自分类Dev

与Sinatra的跨域AJAX请求不起作用-使用jQuery.ajax发送JSON

来自分类Dev

与Sinatra的跨域AJAX请求不起作用-使用jQuery.ajax发送JSON

来自分类Dev

跨域AJAX请求不起作用

来自分类Dev

带有Cors的跨域请求

来自分类Dev

跨域HTTP请求在AngularJS中失败

来自分类Dev

Ext.Ajax跨域发布请求