将托管在 azure 上的 Web 应用程序指向 azure 上的数据库答案

【问题标题】：Point web app hosted on azure to a database on azure将托管在 azure 上的 Web 应用程序指向 azure 上的数据库
【发布时间】：2023-03-29 04:25:02
【问题描述】：

我最近刚刚将后端和前端分开。我曾经将它们全部放在一个文件中并同时运行它们。但是，现在我将它们分开以便更容易维护。

我遇到的问题实际上是将我的前端配置为针对所有请求指向服务器本身。

我将 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.

所以这将是我假设的下一个问题。希望有人可以启发我将其连接并动态地将应用程序指向服务器

【问题讨论】：

stackoverflow.com/questions/49867323/…

标签： node.js reactjs azure axios

【解决方案1】：

嗯，这是一个常见问题，称为 CORS。

跨域资源共享是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源。

因此您应该在后端应用程序中启用 CORS。如果你使用的是 nodejs express，你也可以简单地启用它。

npm i cors --save

const cors = require('cors');

app.use(cors());

【讨论】：