背景
首先,我在Node上运行Restify服务,当我使用GUI HTTP客户端时,它正常运行。我只是强调前面要强调的,这是一个以浏览器为中心的问题。如果需要服务器端解决方案,那就是容纳浏览器......
以下是使用我的Restify Web服务和GUI HTTP客户端的100%功能性HTTP请求和响应:
请求 -
POST /appointments HTTP/1.1
Content-Type: application/json
Accept: application/json
Host: localhost:8085
Connection: close
User-Agent: Paw/2.1.1 (Macintosh; OS X/10.10.1) GCDHTTPRequest
Content-Length: 142
{
"eventName": "Fiesta Forever",
"time": "Fri Dec 19 2014 15:55:00 GMT-0600 (CST)",
"phoneNumber": "13125555555"
}
回复 -
HTTP/1.1 201 Created
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Max-Age: 1000
Content-Type: application/json
Content-Length: 37
Date: Fri, 19 Dec 2014 23:01:29 GMT
Connection: close
{"message":"Alright Alright Alright"}
更重要的是,我的服务器创建了一个未来的cron作业,可以在我的服务器控制台中看到:
Created: Fri Dec 19 2014 14:55:00 GMT-0600 (CST)
我的问题是我正在尝试为我的服务编写浏览器界面。当我尝试使用Ajax发出相同的HTTP请求时,我收到错误。我创建了以下测试函数来生成HTTP请求:
function testPost() {
var jsonBody = "{\"eventName\": \"Fiesta Forever\",\"time\": \"Fri Dec 19 2014 14:15:00 GMT-0600 (CST)\",\"phoneNumber\": \"13125555555\"}";
$.ajax({
url: 'http://localhost:8085/appointments',
accepts: 'application/json',
type: 'POST',
data: jsonBody,
contentType: 'application/json',
crossDomain: true,
headers: {
"Access-Control-Allow-Origin":true
}
});
}
然后我在iOS模拟器中加载包含该功能的页面,并从Safari Developer控制台调用该功能。我收到以下错误:
编辑:删除请求标头后,我收到:
Failed to load resource: the server responded with a status of 406 (Not Acceptable)
服务器-CODE
这是我服务器上的代码。我从Express文档中获取了以下代码,因为它们是实际上似乎为每个响应添加正确标头的唯一解决方案:
//CORS
server.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
res.header("Access-Control-Max-Age", "1000");
next();
});
任何人都可以帮我弄清楚如何使用带有和接收JSON的$ .ajax来创建跨域HTTP请求吗?
答案 0 :(得分:1)
首先,Access-Control-Allow-Origin
是一个响应标头,必须由服务器发送 - 将其作为请求标头与客户端请求一起发送不仅没有意义,而且似乎是服务器拒绝您的请求的原因 - 因为Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
它告诉您它将接受哪些请求标头,而Access-Control-Allow-Origin
不在其中。
之后你得到一个406 Not Acceptable
,这意味着服务器看不到自己能够回复通过Accept
标头请求的内容类型的数据。因此,删除accepts: 'application/json'
确实使jQuery不再告诉服务器您期望特定的内容类型,而只是“给我任何你得到的东西” - 在这种情况下似乎满足服务器......
...无论如何让它以Content-Type: application/json
回复,这有点奇怪,因为这应该是jQuery所要求的(并且您通过GUI的第一个请求也显示出来)。我不知道jQuery是否从该设置中创建了其他内容(您可以尝试查看浏览器的开发人员工具网络面板是否显示请求标题有任何问题)...但问题已解决,这是重要的,对吧? : - )