Укажите веб-приложение, размещенное на Azure, на базу данных на Azure.

Question

Я только недавно разделил свой бэкэнд и фронтэнд.Я имел обыкновение хранить их все в одном файле и запускать их одновременно.Тем не менее, теперь я разделил их на части для удобства обслуживания.

Проблема, с которой я столкнулся, заключается в том, чтобы на самом деле настроить мой интерфейс для указания на сам сервер для всех запросов.

Я использую React для моей интерфейсной средыиспользуя Axios вместе с Redux для запросов API.Используя Express для моего бэк-энда.

Клиентский пакет. Json

 {
      "name": "client",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "deploy": "npm run build",
        "lint:check": "eslint . --ext=js,jsx;  exit 0",
        "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
        "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
        "compile-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.css",
        "minify-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.min.css --output-style compressed",
        "map-sass": "node-sass src/assets/scss/material-dashboard-pro-react.scss src/assets/css/material-dashboard-pro-react.css --source-map true"
      },
      ...
    }

Серверный пакет.json

{
  "main": "server.js",
  "scripts": {
    "start": "node server.js --production"
  },
...
}

Редактировать Я вошел в один из моих запросов axios и добавил URL-адрес своей базы данных вместе с запросом API, как это ..

post("https://jediacademy.azurewebsites.net/api/user/login", userData)

просто чтобы проверить егои я получаю это:

 Access to XMLHttpRequest at 'https://jediacademy.azurewebsites.net/api/user/login' from origin 
'http://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.

Так что это будет моей следующей проблемой, которую я предполагаю.Надеюсь, что кто-то может подсказать мне, как подключить это, а также динамически направлять приложение на сервер

Answer 1

Что ж, это общая проблема, и она называется CORS.

Совместное использование ресурсов из разных источников - это механизм, позволяющий запрашивать ограниченные ресурсы на веб-странице из другого домена за пределами домена, из которого был получен первый ресурс.обслужен.

, поэтому вы должны включить CORS в своем фоновом приложении.Если вы используете nodejs express, вы можете просто включить это также.

npm i cors --save

const cors = require('cors');

app.use(cors());