Есть простое приложение на react.js localhost:3000
Есть простое серверное приложение на express.js localhost:5000
На сервере прописаны заголовки для cors, но при запросе в браузере все равно вылетает ошибка:
Access to XMLHttpRequest at '
localhost:5000/auth/login' from origin '
localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Что я делаю не так?
Я знаю про расширение(пакет) cors, но хотел бы решить вопрос без его установки, т.к. хочу понять механизм работы cors.
В подавляющем большинстве ответов от гугл необходимо добавить Access-Control-Allow-Origin', '*'. Но у меня уже указан этот заголовок.
Правильно ли я понимаю, что сервер localhost:3000 должен сделать прерфлай запрос на localhost:5000 и в ответ получить заголовок Access-Control-Allow-Origin, значение которого должен быть как раз localhost:3000 или любой хост(*) ?
Запрос на сервер:
const onLogin = (e) => {
e.preventDefault()
console.log(username, password)
axios
.post('http://localhost:5000/auth/login', {
headers: {
'Content-Type': 'application/json',
},
body: {
username: username,
password: password,
},
})
.then((res) => {
console.log(res)
})
}
Главный файл express.js
const express = require('express')
const authRouter = require('./authRouter')
const PORT = process.env.PORT | 5000
const app = express()
app.use(express.json())
app.use('/auth', authRouter)
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', '*')
res.setHeader('Access-Control-Allow-Headers', '*')
res.setHeader('Access-Control-Allow-Credentials', true)
next()
})
const start = () => {
try {
app.listen(PORT, () => {
console.log('Server was started on port ', PORT)
})
} catch (error) {
console.log(error)
}
}
start()
