Звонки на локальный хост, не работающие с ReactJS / Axios / Express - PullRequest
Новая
       7

Звонки на локальный хост, не работающие с ReactJS / Axios / Express

1 голос
/ 05 марта 2020

Я пытаюсь создать приложение с полным стеком, используя ReactJS для внешнего интерфейса и ExpressJS для внутреннего интерфейса. Я использую Ax ios, чтобы звонить с моего внешнего интерфейса на мой внутренний. Когда я делаю эти вызовы, я получаю следующие ошибки:

Errors in browser console

Мой express индексный файл: 

const express = require('express')
const path = require('path')

var app = express()

const PORT = process.env.PORT || 5000

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

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

Мой вызов Get от внешнего интерфейса React: 

componentDidMount() {
  axios.get("http://localhost:5000/servers.json").then((res => {
    this.setState({ servers: res.data })
  }))
}

Сервер React работает на порту 3000, а сервер Express работает на порту 5000, поэтому здесь не должно быть конфликтов ...

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Причина, по которой вы получаете ошибку http://localhost: 3000 не разрешена Access-Control-Allow-Origin из-за той же политики происхождения функция безопасности, которая ограничивает ваш сценарий реакции от доступа к вашему серверу и связи с ним, поскольку они имеют различное происхождение . Обратите внимание, что для документов или сценариев, которые рассматриваются как имеющие одно и то же происхождение , они должны иметь одинаковый протокол (например, http / https), имя хоста (например, localhost / www.my-server.com) и порт . В вашем случае сценарий реагирования запускается на порту 3000, в то время как сценарий express выполняется на порте 5000, поэтому возникает ошибка.

Чтобы решить эту проблему, необходимо включить CORS - Cross Origin Resource Sharing в коде вашего сервера. Сначала установите зависимость cors с помощью команды

npm install cors

Затем обновите код на своем сервере, чтобы он выглядел следующим образом: 

const express = require('express')
const path = require('path')
const cors = require('cors')

const app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

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

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

Надеюсь, это работает для вас.

1 голос
/ 06 марта 2020

Это похоже на проблему с базисными c корами. Добавьте this cors middleware на ваш express сервер. Это современное решение этой проблемы. 

const express = require('express')
const path = require('path')
var cors = require('cors')

var app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

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

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

Если вас интересует корс в целом, посетите страницу википедии .

...