json - 无法使用 JSON 从 React/axios 向 Restify 服务器发出 POST 请求

Question

我有一个像这样设置的 Restify:

var restify = require('restify');

const server = restify.createServer();

//server.use(restify.plugins.acceptParser(server.acceptable)); // [1]
server.use(restify.plugins.queryParser());
server.use(restify.plugins.bodyParser());

server.use(function(req, res, next) {
  console.log(req); // <-- Never see the POST from React here
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*');
  res.setHeader('Access-Control-Allow-Methods', '*');
  next();
});

我定义了一堆 GET 和 POST 路由，到目前为止它工作得很好。我从 Android 应用程序、Python 脚本调用服务器，并仅使用 curl 进行测试。完全没有问题。整洁!

但是，现在我已经使用 React 实现了一个 Web 应用程序，并希望使用 axios 包向 Restify API 发出请求。 GET 请求没问题，因此我排除了 URL 中的任何拼写错误或此类内容。

但是像下面这样的 POST 请求将不起作用:

var data = {"test": "hello"};
axios.post("http://.../api/v1/message/question/public/add", data)
  .then(function (response) {
    console.log("Test question sent!");
  })
  .catch(function (error) {
    console.log(error);
  });

当我检查浏览器开发人员工具时，我可以看到浏览器正在尝试向该 URL 发出 OPTIONS 请求(而不是 POST)。根据我所读到的内容，我认为这是因为浏览器正在发出“预检请求”。问题是我收到 405 Method Not allowed 错误:

Request URL: http://.../api/v1/message/question/public/add
Request method: OPTIONS
Remote address: ...
Status code: 405 Method Not Allowed

Response headers (178 B)    
  Server: restify
  Allow: POST
  Content-Type: application/json
  Content-Length: 62
  Date: Sat, 09 Sep 2017 08:16:32 GMT
  Connection: keep-alive
Request headers (485 B) 
  Host: ...
  User-Agent: Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/55.0
  Accept: text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3
  Accept-Encoding: gzip, deflate
  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: content-type
  Origin: http://...
  DNT: 1
  Connection: keep-alive

但是为什么呢？我允许restify中的所有Access-Control-Allow-Methods。一切正常，除了 POST 请求，并且仅当它们来自浏览器(使用 React Web 应用程序)时。我认为这是因为 OPTIONS 请求，但我不知道如何处理它。

顺便说一句，使用 JSON.stringify(data) 时，POST 请求可以通过，但 API 需要的是 Json，而不是字符串。由于使用所有其他方法它都工作得很好，我不想仅仅为了解决这个问题而更改 Restify 代码。

[1] 如果我使用此行，则会收到以下错误:AssertionError [ERR_ASSERTION]: Acceptable ([string]) is required at Object.acceptParser (/home/bob/node_modules/restify/lib/插件/accept.js:30:12)

Answer 1

又过了几个小时，我终于找到了solution 。我已更改我的 restify 服务器代码，如下所示:

var restify = require("restify");
var corsMiddleware = require('restify-cors-middleware')

var cors = corsMiddleware({
  preflightMaxAge: 5, //Optional
  origins: ['*'],
  allowHeaders: ['API-Token'],
  exposeHeaders: ['API-Token-Expiry']
});


// WITHOUT HTTPS
const server = restify.createServer();

server.pre(cors.preflight);
server.use(cors.actual);
...
(rest is the same as above)

说实话，我不太清楚它到底有什么作用。但它正在发挥作用，而且今天已经消耗了我太多的精力。我希望它能在某个时候帮助其他人。一切似乎都是 restify 最近发生的变化。