标题中没有 no-cors 无法获取 POST

Question

在提出这样的要求时：

 return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),

                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

请求使用方法 OPTIONS 而不是 POST 运行。仅在添加模式时：’no-cors’ 请求变为 POST：

 return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                mode: 'no-cors',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),
                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

但响应不正常（即使网络响应状态为 200）：{type: “opaque”, url: “”, status: 0, ok: false, statusText: ““…} 我想是因为

Content-Type 标头的唯一允许值是：application/x-www-form-urlencoded multipart/form-data text/plain

此处描述 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

有什么方法可以通过获取来实时发布 POST json 数据吗？

原文由 htochko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您发送的自定义 Content-Type 标头会导致您的请求进行预检，这意味着将在实际 POST 请求 之前 发送包含有关即将发送的 POST 请求的一些元数据的 OPTIONS 请求。

您的服务器需要准备好处理此 OPTIONS 请求。您没有指定服务器的内容，但是以 express 为例，您可以注册一个中间件来拦截所有“OPTIONS”请求，设置 Access-Control-Allow-Origin: * 和 Access-Control-Allow-Headers: Content-Type 标头，并以 200 响应。

如果您可以使用 ‘Content-Type’: ‘text/plain’ 标头发出请求，那将解决您的问题。或者，您可以使用完全绕过 XHR 的东西，例如 JSONP。

原文由 Asad Saeeduddin 发布，翻译遵循 CC BY-SA 3.0 许可协议