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.

[zhaowenyuan]

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

[jamo]

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

[zhaowenyuan]

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

[AurelianSpodarec]

Doesn't seem it works for me.

I got this: Access to XMLHttpRequest at 'http://localhost:8888/wp-json/wc/v3/orders?oauth_consumer_key=ck 02c605438a&oauth_nonce=sSwJtghq&oauth_signature_method=HMAC-SH 56&oauth_timestamp=1601270062&oauth_version=1.0&oauth_signature=H4RmEfiolLCrvq68dF8g71Pxf5cNK1NzQw%3D' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. And this is my code in function.php

add_filter('init', 'add_cors_header');
function add_cors_header() {
    header("Access-Control-Allow-Origin: http://localhost:3000");
    header("Access-Control-Allow-Headers", "X-Requested-With, content-type");
}

Tried a few things, not sure why this doesn't work?

[saadazghour]

@AurelianSpodarec, Same issue here.

[Merott]

This partial port of fastify/fastify-cors to vercel/micro might help.

[shail10]

Can we resolve this from frontend?

[SandaruwanB]

use this part to the server app.options( '*' , cors()) or app.options( 'your static URI' , cors())

[aditimahabole]

where to write this code...in which file?

[aditimahabole]

[aditimahabole]

how to solve this problem

[SandaruwanB]

@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"); });

[ajaykathwate]

Hey, did you solved this issue? how?

[SandaruwanB]

@ajaykathwate yeah look at the above code. you have to use cors dependency to resolve this problem. then after you can fix it.

[velkathir]

This error is display in ckeditor

Server.js

const express = require("express"); const path = require("path"); const app = express(); const cors = require("cors");

const port = process.env.PORT || 8000;

app.use(express.static(path.join(__dirname, "build")));

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

app.get("/", function(req, res) { res.sendFile(path.join(__dirname, "build", "index.html")); });

app.use(function(req, res, next) { //console.log(req, res, next, "req, res, nextreq, res, next") if ( req.method === "GET" && req.accepts("html") && !req.is("json") && !req.path.includes(".") ) { //res.sendFile('index.html', { root }) res.sendFile(path.join(__dirname, "build", "index.html")); } else next(); });

app.listen(port);

[ENGR-MANSOOR]

I have same issue after hosting mine react app on ubuntu nginx, without backend, am gettting same issue, i cannot understand why???, any body can guide me?

[DharanikumarS]

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:8085' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. how to solve this issue in springboot and using jquery

[xi9d]

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/

[rahuul296]

Thanks

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/

Thanks this works for me!

[vaishnavi1029]

Access to XMLHttpRequest at 'myurl' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field version is not allowed by Access-Control-Allow-Headers in preflight response. help me how to do it.

const headers = {'Version':'v2'}; const fetchdata = await axios.get('/example',{headers});

[Bharath02062000]

Access to XMLHttpRequest at 'https://hn.inspectlet.com/ginit/12345678' (redirected from 'http://hn.inspectlet.com/ginit/12345678') from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.

how to solve this problem?

[pounyinyiabdeljamil]

comment résoudre le problème CORS du cote frontend avec (angular 16) ? svp aider moi

[rafaelparolaTechne]

@Bharath02062000 Please, I'm having the same problem as you. Did you find a solution?

[karadagmustafa]

This error should be resolved in the backend. The cors error doesn't appear when both the frontend and the backend are at the same url. The most important thing to pay attention to is setting the frontend port

@Configuration @EnableWebMvc public class CorsConfig {

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:3000");    ***
    config.setAllowedHeaders(Arrays.asList(
            HttpHeaders.AUTHORIZATION,
            HttpHeaders.CONTENT_TYPE,
            HttpHeaders.ACCEPT));
    config.setAllowedMethods(Arrays.asList(
            HttpMethod.GET.name(),
            HttpMethod.POST.name(),
            HttpMethod.PUT.name(),
            HttpMethod.DELETE.name()));
    config.setMaxAge(3600L);
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(-100);
    return bean;
}

}

[i-m-fitbeast]

@karadagmustafa Thanks... Solution was amazing for back-end developer. It worked for me.

[prachip1]

sometimes because of sequence also, this issue appears. For eg. for me keeping express.json() first and then route solved this issue. app.use(express.json());

app.use('/', require('./routes/authRoutes'))

[tech7booth]

i am also getting this issue heres my code

app.use(cors({ origin: "https://genie-ai0.vercel.app", methods: ['GET', 'POST', 'PUT', 'DELETE'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true }));

and i amd using next js as frontend requesting code - const { data } = await axios.post(${BASE_URL}/api/v1${api}, { email, password }, {withCredentials:true});

[prachip1]

okay try doing like this

app.use((rs,next)=>{ res.setHeader('Access-Control-Allow-Origin', 'https://genie-ai0.vercel.app'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });

app.use('/', require('./yourendpointsroutes));

app.use(cors())

try this once

[tech7booth]

Thanks for help but there was another silly issue

[waxp2edev0101]

use cors module on your backend code part.

[Khaleeq01]

I deployed MERN stack stack project on vercel backend is working but in frontend this error is coming

[SandaruwanB]

const allowCors = fn => async (req, res) => { res.setHeader('Access-Control-Allow-Credentials', true) res.setHeader('Access-Control-Allow-Origin', '*') // another common pattern // res.setHeader('Access-Control-Allow-Origin', req.headers.origin); res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT') res.setHeader( 'Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' ) if (req.method === 'OPTIONS') { res.status(200).end() return } return await fn(req, res) }

const handler = (req, res) => { const d = new Date() res.end(d.toString()) }

module.exports = allowCors(handler)

You can refer vercel guids to do this. go through this link https://vercel.com/guides/how-to-enable-cors