Uncaught in promise TypeError Failed to fetch and Cors error

Question

having a problem with getting data back from database  I am trying my best to explain the problem   1 If I leave  mode   no-cors  inside the code below  then I can get data back from server with Postman  but not with from my own server  Thinking it has to be my client side error   When I remove  mode   no-cors  then I am getting 2 errors  -Fetch API cannot load http   localhost 3000   Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response  -Uncaught  in promise  TypeError  Failed to fetch   Quick Browsing suggested to put in the  mode   no-cors  which fixed this error  but it does not feel right thing to do   So I thought maybe somebody has a suggestion how to approach this problem   Really hope I was clear enough  but pretty sure I am not giving clear explanation here  S  function send        var myVar     id    1       console log  tuleb siia   document getElementById  saada   value       fetch  http   localhost 3000             method   POST           headers                 Access-Control-Allow-Origin                     Content-Type    text plain               mode     no-cors           body  JSON stringify myVar            body    id    document getElementById  saada   value         then function muutuja            document getElementById  v  ljund   innerHTML   JSON stringify muutuja

User · Answer

you can use solutions without adding  Access-Control-Allow-Origin         if your server is already using Proxy gateway this issue will not happen because the front and backend will be route in the same IP and port in client side but for development  you need one of this three solution if you don t need extra code  1- simulate the real environment by using a proxy server and configure the front and backend in the same port  2- if you using Chrome you can use the extension called Allow-Control-Allow-Origin    it will help you to avoid this problem  3- you can use the code but some browsers versions may not support that so try to use one of the previous solutions  the best solution is using a proxy like ngnix its easy to configure and it will simulate the real situation of the production deployment

User · Answer

See mozilla org s write-up on how CORS works     You ll need your server to send back the proper response headers  something like   Access-Control-Allow-Origin  http   foo example Access-Control-Allow-Methods  POST  PUT  GET  OPTIONS Access-Control-Allow-Headers  Origin  X-Requested-With  Content-Type  Accept  Authorization   Bear in mind you can use     for Access-Control-Allow-Origin that will only work if you re trying to pass Authentication data   In that case  you need to explicitly list the origin domains you want to allow   To allow multiple domains  see this post

User · Answer

In my case  the problem was the protocol  I was trying to call a script url with http instead of https

User · Answer

Adding mode  no-cors  to the request header guarantees that no response will be available in the response  Adding a  non standard  header  line  access-control-allow-origin  will trigger a OPTIONS preflight request  which your server must handle correctly in order for the POST request to even be sent  You re also doing fetch wrong     fetch returns a  promise  for a Response object which has promise creators for json  text  etc  depending on the content type      In short  if your server side handles CORS correctly  which from your comment suggests it does  the following should work  function send        var myVar     id    1       console log  tuleb siia   document getElementById  saada   value       fetch  http   localhost 3000             method   POST           headers                 Content-Type    text plain                     body  JSON stringify myVar         then function response            return response json           then function muutuja           document getElementById  v  ljund   innerHTML   JSON stringify muutuja               however  since your code isn t really interested in JSON  it stringifies the object after all  - it s simpler to do  function send        var myVar     id    1       console log  tuleb siia   document getElementById  saada   value       fetch  http   localhost 3000             method   POST           headers                 Content-Type    text plain                     body  JSON stringify myVar         then function response            return response text           then function muutuja           document getElementById  v  ljund   innerHTML   muutuja

[javascript] Uncaught (in promise) TypeError: Failed to fetch and Cors error

Examples related to javascript

Examples related to node.js

Examples related to cors