DEV Community

Jon Snow
Jon Snow

Posted on • Updated on

Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin'

Hello

Searching everywhere for my problem, I cannot find any solution

my problem

i added cors package in main file

index.js
const cors = require('cors');

const corsOptions = {
    origin: 'https://backend.com/',
    optionsSuccessStatus: 200,
    credentials: true

}

app.use(cors(corsOptions));

//  prelight cors error
app.options('*', cors(corsOptions));


app.use((req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    next();
})

Enter fullscreen mode Exit fullscreen mode

front=end file post request

 axios.post('https://backend.com/blog', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json'

      },
      body: JSON.stringify(sendData)
    })
Enter fullscreen mode Exit fullscreen mode

i set origin value = *

Beacuse my Backend file running port = 3001

Front-end file running on port = 3000

what error i getting

** Access to XMLHttpRequest at 'https://backend.com/blog' from origin 'https://portfolio.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://backend.com/' that is not equal to the supplied origin.`
**

Note : - Urls in above line are not real so don't serch these website on google

Latest comments (0)