Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to fetch POST without no-cors in header

On making request like that:

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

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

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

The only allowed values for the Content-Type header are: application/x-www-form-urlencoded multipart/form-data text/plain

described here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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

like image 340
htochko Avatar asked Jun 06 '16 23:06

htochko


People also ask

How do you pass no-CORS in Fetch?

Access to fetch set the request's mode to 'no-cors' to fetch the resource with CORS disabled. javascript set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How do I fix CORS header Access-Control allow Origin missing?

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.

What is no-CORS mode fetch?

Note that mode: "no-cors" only allows a limited set of headers in the request: Accept. Accept-Language. Content-Language. Content-Type with a value of application/x-www-form-urlencoded , multipart/form-data , or text/plain.

How do you fix a CORS problem?

Short description. Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.


1 Answers

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.

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.

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.

like image 110
Asad Saeeduddin Avatar answered Sep 21 '22 10:09

Asad Saeeduddin