11

我的前端代码：

<form action="" onSubmit={this.search}>
  <input type="search" ref={(input) => { this.searchInput = input; }}/>
  <button type="submit">搜索</button>
</form>

// search method:
const baseUrl = 'http://localhost:8000/'; // where the Express server runs
search(e) {
  e.preventDefault();
  let keyword = this.searchInput.value;
  if (keyword !== this.state.lastKeyword) {
    this.setState({
      lastKeyword: keyword
    });
    fetch(`${baseUrl}search`, {
      method: 'POST',
      // mode: 'no-cors',
      headers: new Headers({
      'Content-Type': 'application/json'
      }),
      // credentials: 'include',
      body: JSON.stringify({keyword})
    })
  }
}

我的 Express.js 服务器代码：

app.all('*', (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  // res.header('Access-Control-Allow-Credentials', true);
  res.header('Content-Type', 'application/json; charset=utf-8')
  next();
});

当我提交表单时，我收到了两个请求。其中一个是 OPTIONS 请求，另一个是 POST 请求，并且对它的响应是正确的：

对 /search 的两个请求，响应代码为 200 对 localhost:8000/search 的 OPTIONS 请求 对 localhost:8000/search 的 POST 请求

如您所见，Express 服务器运行在 8000 端口，而 React 开发服务器运行在 3000 端口。localhost:3000正在请求localhost:8000/search，并且localhost:8000正在通过使用 POST 方法请求另一个源。但是，只有第二个请求运行良好。我不知道这是怎么发生的。当然，如果我使用查询字符串发出 GET 请求，一切正常。但我也想知道如何使用请求正文进行 POST 获取。

4

2 回答 2

26
于 2017-10-24T07:19:50.903 回答
-2

我最近遇到了类似的问题并使用 FormData 发送我的请求有效负载，您不需要发送自定义标头。FormData 对象为您处理身份验证凭据，但它使用 SSL，并且只能使用 localhost 不提供的 https，因为本地主机使用 http 协议。查看 form-data npm 文档以获取有关如何在您的 express 应用程序中安装和使用它的详细信息，但 FormData 很容易在主要浏览器中使用。这里是一个简单的代码示例 npm install --save form-data

`

var FormData = require('form-data');
var http = require('http'); 
var form = new FormData();
 
http.request('http://nodejs.org/images/logo.png', function(response) {
  form.append('my_field', 'my value');
  form.append('my_buffer', new Buffer(10));
  form.append('my_logo', response);
});

`

于 2020-10-06T09:20:05.193 回答