Разрешение CORS в NodeJS

Question

Я определил мое Express js приложение:

const express = require('express')
var history = require('connect-history-api-fallback');
const path = require('path')
const http = require('http')
const socketio = require('socket.io')

require('./db/mongoose')
const userRouter = require('./routers/user')

const publicDirPath = path.join(__dirname, '../public')
const app = express()

app.use(express.static(publicDirPath))
app.use(history({
  index: '../public/index.html'
}))
app.use(express.static(publicDirPath))
app.use(express.json())
app.use(userRouter)

const server = http.createServer(app)
const io = socketio(server)

io.on('connection', socket => {
  console.log('New WebSocket connection')

  socket.on('join', () => {
    socket.emit('message', 'Welcome to the app')
  })
})

module.exports = server

Затем я использую его мой индекс. js Файл:

const app = require('./app')

const port = process.env.PORT

app.listen(port, () => {
  console.log(`Server is up on port ${port}`)
})

Когда я запускаю приложение и отправлять запросы с одного и того же порта - все работает просто отлично. Но когда я пытаюсь отправить запросы с другого локального порта, ie. 8080, я получаю ошибку перекрестного происхождения. Я попытался установить пакет cors и использовать его следующим образом:

const cors = require('cors')

app.options('*', cors())
app.use(cors());

И получил тот же результат.

Я попытался передать конфигурацию на cors:

app.use(cors({
  origin: 'http://localhost:8080'
}));

И все же получил тот же результат.

Что я делаю не так и как я могу заставить его работать?

Answer 1

Когда ваше приложение веб-интерфейса пытается выполнить запрос к серверу express,

Сервер express блокирует этот запрос, поскольку источник запроса (т. Е. Сервер веб-интерфейса) неизвестен express server

В качестве запроса, который вы пытаетесь сделать из домена сервера express. это причина, по которой вы должны сообщить серверу, пожалуйста, примите запрос от этого источника, он же IP-адрес

, и вы можете достичь с помощью cors

Answer 2

Давайте минутку объясним, что такое «происхождение» простыми словами.

Когда пользователь просматривает веб-сайт, он использует адрес. Обычно этот адрес является доменом, но когда мы запускаем наши тесты, мы в основном работаем с локальными IP-адресами.

Для CORS это не имеет значения. После включения Allow-Origins сервер просматривает адрес, который пользователь использовал для доступа к сайту , и определяет его как «источник» запроса.

Очевидно, что на более глубоком уровень, все сводится к IP-адресам. Но когда речь идет о CORS, это скорее метод безопасности высокого уровня. Это помогает предотвратить подделку межсайтовых запросов, например.

В заключение, для того чтобы CORS работал, убедитесь, что вы разрешили адрес, который пользователь использует для доступа к службе HTTP .

Итак, если вы обслуживаете приложение VUE, которое работает на http://localhost:8080, и из него вызываете службу HTTP на http://localhost:5555, вам нужно будет сделать это на указанном HTTP услуга:

app.use(cors({
  origin: 'http://localhost:8080'
}));