无法在标头中获取没有NO-COR的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))

请求使用方法选项而不是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：“不透明”，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

有没有什么方法可以用FETCH来实现POST json数据？

Answer 1

使用non-cors时，所有标头必须是有效的simple-Headers。限定为简单标头的content-type标头的唯一有效值是：

headers: [
  ['Content-Type', 'application/x-www-form-urlencoded'],
  ['Content-Type', 'multipart/form-data'],
  ['Content-Type', 'text/plain'],
]

意外情况例外：

headers: [
  ['Content-Type', 'application/csp-report'],
  ['Content-Type', 'application/expect-ct-report+json'],
  ['Content-Type', 'application/xss-auditor-report'],
  ['Content-Type', 'application/ocsp-request'],
]

• 简单标头
• CORS-协议-例外

Answer 2

您正在发送的自定义content-type头会使您的请求被预置，这意味着将在实际的POST请求之前发送一个选项请求，其中包含一些关于将要发送的POST请求的元数据。

您的服务器需要准备好处理此选项请求。您还没有指定服务器写入的内容，但例如，通过express，您可以注册一个中间件，该中间件拦截所有“options”请求，设置access-control-allow-origin:*和access-control-allow-headers:content-type头，并以200响应。

如果您可以使用'content-type':'text/plain'头发出请求，那么这将解决您的问题。或者，您可以使用完全绕过XHR的东西，如JSONP。