I've gone through all the cors doc's on express.js guides and I seem to have everything setup perfectly, but I haven't been able to fix this issue on my production server. I don't get any errors on other browsers, only safari.
I've gone through other answer's on here CORS request not working in Safari and haven't had any success. Note- the first message is a warning that I assume is has to with my api endpoint being served from a non secure page (http://api) and when I setup SSL (https://api) on it the message will go away
The error is:
[blocked] The page at https://website.com/login was not allowed to display insecure content from http://api.website.com/auth/login.
Not allowed to request resource
XMLHttpRequest cannot load http://api.website.com/auth/login due to access control checks.
This is just a standard ReactJs login form that sends a POST request like this:
axios.post(`${process.env.API}/auth/login`, params, { withCredentials: true })
.then(response => {
...
})
.catch(error => {
...
});
And here is my CORS setup in my api.
/index.js
const whitelist = ['http://localhost:3000', 'http://website.com', 'https://website.com']
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
},
credentials: true
}
app.use(cors(corsOptions));
app.options('*', cors(corsOptions));
app.use('/', routes(router));
I don't get any errors in development only on the production endpoint. Am I missing something?
