Question

提出这样的要求：

var lastIndex = $scope.productList.length-1;
for (var j = 1; j <= 9; j++) { // load 9 more on every call to the loadMore function
   $scope.productList.push(response.data.products[lastIndex + j]);
}

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

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))

但响应不好（即使网络响应状态为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

是否可以通过fetch实现POST json数据？

Answer 1

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

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

如果您可以使用＆＃39;内容类型＆＃39;：＆＃39; text / plain＆＃39;标题，这将解决您的问题。或者，你可以使用完全绕过XHR的东西，比如JSONP。

Answer 2

使用non-cors时，所有标头必须为有效的简单标头。符合 simple-header 的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'],
]

Answer 3

如果您尝试调用 api 并在您的 React 应用程序中遇到此问题，您可以向服务器添加代理，并且 cors 错误将被删除

只需在 package.json 中添加这一行

"proxy":"url-to-your-server",

无标题时无法获取POST

3 个答案: