1

背景

首先，我在 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 开发者控制台调用该函数。我收到以下错误：

在此处输入图像描述

编辑：删除请求标头后，我收到： Failed to load resource: the server responded with a status of 406 (Not Acceptable)

服务器代码

这是我服务器上的代码。我从 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 请求？

4

1 回答 1

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 不再告诉服务器你期望一个特定的内容类型，而只是“给我你得到的任何东西”——在这种情况下，这似乎满足了服务器......</p>

… 无论如何都要让它响应Content-Type: application/json，这有点奇怪，因为这应该正是 jQuery 所要求的（并且您通过 GUI 的第一个请求也显示了）。我不知道 jQuery 是否从该设置中产生了其他东西（您可以尝试查看浏览器的开发人员工具网络面板是否显示请求标头有任何问题）……但是问题解决了，这才是最重要的，对吧？:-)

于 2014-12-20T00:17:18.487 回答