在`create-react-app`中设置POST的`fetch`标头

Question

我完全被这个难住了。

我有一个非常简单的小型 Flask 应用程序，它用标题包装所有响应

    res.headers['Access-Control-Allow-Origin'] = '*'
    res.headers['Content-Type'] = 'application/json'

我有一个 React 应用程序，使用

create-react-app

设置来发出请求。一个

GET

请求，像这样访问

const data = await fetch(new URL('photos', apiURL))

就可以正常工作。

我现在正在尝试向不同的路线发出

POST

请求。

客户端代码：

  const headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
  };
  const url = new URL(`photo-rename/${id}`, apiURL);
  const options = {
      method: 'POST',
      body: JSON.stringify([{ new_name: currentName }]),
      headers,
  };
  fetch(url, options);

服务器端代码：

@APP.route('/rename/<name>', methods=['POST'])
def new_name(photo_name):
    data = request.get_json()
    # do stuff with data
    return add_headers(Response(json.dumps(['renamed: {}'.format(new_name)]), mimetype='application/json'))

我陷入了一个循环，要么收到 CORS 错误，要么收到 415（不支持的媒体类型）响应。

当代码如图所示时，我在飞行前请求中收到 200，在实际 POST 上收到 CORS 错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

然后我将

OPTIONS

添加到烧瓶路线中：

@APP.route('/rename/<name>', methods=['POST', 'OPTIONS'])

。这导致我在飞行前请求中出现 415 错误。查看控制台，我看到请求中的

Content-Type

标头为

Content-Type: text/plain;charset=UTF-8

，即使我在获取选项中将其设置为

application/json

。

然后我尝试将

mode: 'no-cors'

添加到请求中。这也会导致 415 响应（没有飞行前，只有 POST 请求）。在开发工具中，我再次看到请求标头包含

Content-Type: text/plain;charset=UTF-8

。

无论如何，我可以在 Postman 中成功发出 POST 请求，这实际上设置了标头

'Content-Type': 'application/json'

。

React 是否在某处覆盖了标头？我还缺少什么？

Answer 1

在客户端的

package.json

中，尝试将代理添加到您的 API URL。

应该看起来像：

"proxy": "http://localhost:8080"