无法在标头中没有 no-cors 的情况下获取 POST

2022-01-15 00:00:00 cors javascript fetch-api

提出这样的要求:

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:

request running with method OPTIONS instead POST. Only on adding mode: 'no-cors' request become 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: ""...}我想是因为

but response not ok than (even if network response status is 200): {type: "opaque", url: "", status: 0, ok: false, statusText: ""…} I suppose it because

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

The only allowed values for the Content-Type header are: 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 数据吗?

Is any way bring to live POST json data with fetch?

推荐答案

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

The custom Content-Type header you're sending causes your request to be preflighted, which means an OPTIONS request, containing some metadata about the POST request that is about to be dispatched, will be sent before the actual POST request.

您的服务器需要准备好处理此 OPTIONS 请求.您尚未指定服务器的写入内容，但例如使用 express，您可以注册一个拦截所有OPTIONS"请求的中间件，设置 Access-Control-Allow-Origin: * 和Access-Control-Allow-Headers: Content-Type 标头，并以 200 响应.

Your server needs to be prepared to deal with this OPTIONS request. You haven't specified what the server is written in, but with express for example, you can register a middleware that intercepts all 'OPTIONS' requests, sets the Access-Control-Allow-Origin: * and Access-Control-Allow-Headers: Content-Type headers, and responds with 200.

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

If it is possible for you to make the request using a 'Content-Type': 'text/plain' header, that would solve your problem. Alternatively you could use something that bypasses XHR entirely, like JSONP.

相关文章