Fetch API Post method is not working

Question

fetch('http://localhost:9000/api/app/contact', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ email: this.state.email, contactNumber: this.state.phone, enquiry: this.state.msg }) }) .then(function(res) { return res.json() }) .then(function(data) { alert('We will contact you shortly') });

When I render above coding, I've encountered following error:

Failed to load http://localhost:9000/api/app/contact: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But when I tried with postman, it's successfully working. Please help me, is there any code missing in my fetch api.

Following is postman POST request and code.

following code is Post request from Postman.

var data = JSON.stringify({ "email": "[email protected]", "contactNumber": "0123456789", "enquiry": "Testing" }); var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener("readystatechange", function () { if (this.readyState === 4) { console.log(this.responseText); } }); xhr.open("POST", "http://localhost:9000/api/app/contact"); xhr.setRequestHeader("content-type", "application/json"); xhr.setRequestHeader("cache-control", "no-cache"); xhr.setRequestHeader("postman-token", "d5e08b69-5f0f-8193-e021-e2c3b1bfe1a3"); xhr.send(data);

In NodeJS server side, I've already CORS in backend.

var express = require('express'), controller = require('./app.controller'), router = express.Router(), cors = require('cors'); var issue2options = { origin: true, methods: ['POST'], credentials: true, maxAge: 3600 }; router.post('/contact', cors(issue2options), controller.sendContactForm); module.exports = router;

CORS support needs to be added/enabled on the server running on http://localhost:9000. See enable-cors.org/server.html and developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — sideshowbarker
– sideshowbarker, Commented Sep 8, 2017 at 3:00
@sideshowbarker I've edited my answer and configured CORS in node. — Pyae Phyoe Shein
– Pyae Phyoe Shein, Commented Sep 8, 2017 at 3:06
Am I reading in your code correctly that on the node server you only have CORS enabled for the /contact route but that your frontend code is making a request to /api/app/contact? On the node backend do those somehow end up resolving to the same route? To isolate/troubleshoot the problme, Have you tried testing with temporarily enabling CORS for all routes instead of just that one route? — sideshowbarker
– sideshowbarker, Commented Sep 8, 2017 at 3:11

sideshowbarker · Accepted Answer · 2017-09-08 03:55:49Z

You need to add explicit OPTIONS handling for CORS preflights that browsers send on their own:

app.options('/contact', cors(issue2options)); // enable preflight OPTIONS router.post('/contact', cors(issue2options), controller.sendContactForm);

See https://www.npmjs.com/package/cors#enabling-cors-pre-flight

jperelli · Accepted Answer · 2017-09-08 03:00:21Z

Postman is not the same as the browser.

To fix that, you need the server in http://localhost:9000/api/app/contact to return in its headers the CORS header, like this for example Access-Control-Allow-Origin: *

Read here for detailed CORS reference https://enable-cors.org/server.html

I've edited my answer and CORS is already configured in NodeJS.

Collectives™ on Stack Overflow

Fetch API Post method is not working

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related