micro: Access to XMLHttpRequest at 'http://localhost:3000/domains/xxx/records' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Access to XMLHttpRequest at ‘http://localhost:3000/domains/xxx/records’ from origin ‘null’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. I wrote the following code on the server side, but it didn’t work! res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Headers", "X-Requested-With"); res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.setHeader("X-Powered-By",' 3.2.1'); res.setHeader("Content-Type", "application/json;charset=utf-8");

And the output: (node:26284) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 25

Most upvoted comments

@aditimahabole first install cors, express packages using “npm i cors express” and create server file and in your server file like below.

const express = require(“express”); const cors = require(“cors”); const app = express();

app.use(cors()); app.get(“/”, (req,res)=>{ res.send(“server working”); });

app.listen(8080, ()=>{ console.log(“Server Listen on http://localhost:8080”); });

https://github.com/zeit/micro/issues/415#issuecomment-531683591 It worked, thank you! my code:

		res.setHeader("Access-Control-Allow-Origin", "*");
		res.setHeader("Access-Control-Allow-Credentials", "true");
		res.setHeader("Access-Control-Max-Age", "1800");
		res.setHeader("Access-Control-Allow-Headers", "content-type");
		res.setHeader("Access-Control-Allow-Methods","PUT, POST, GET, DELETE, PATCH, OPTIONS");
		// res.setHeader("Content-Type", "application/json;charset=utf-8"); // Opening this comment will cause problems

Hey, I know the CORS messages and erros can be messy; it seems to be saying that content-type is missing from the Access-Control-Allow-Headers response:

You’ll need to add that header to the CORS allow headers response:

> res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, content-type");
---
< res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");

I have been having the same problem until i came accross this article and found to be helpfull https://www.stackhawk.com/blog/react-cors-guide-what-it-is-and-how-to-enable-it/