Point web app hosted on azure to a database on azure

Question

I just recently split my back-end and front-end apart. I used to have them all in one file and run them concurrently. However, now I have split them apart for a little easier maintainability.

The problem I have having is actually configuring my front-end to point to the server itself for all requests.

I am using React for my front-end framework using Axios alongside Redux for API requests. Using Express for my back-end.

Client package.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"
      },
      ...
    }

Server package.json

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

Edit I went into one of my axios requests and added my database URL along with the api request like so..

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

just to test it and I get this:

 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.

So this is going to be my next issue i'm assuming. Hoping someone can enlighten me on connecting this along with pointing the app to the server dynamically

https://stackoverflow.com/questions/49867323/no-access-control-allow-origin-header-is-present-on-the-requested-resource-a/49867665#49867665 — bereket gebredingle, Feb 20 '19 at 01:59

score 0 · Answer 1 · answered Feb 20 '19 at 01:56

Well, this is common issue and called CORS.

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

so you should enable CORS in your back-end application. If u are using nodejs express you can simple enable that likewise.

npm i cors --save

const cors = require('cors');

app.use(cors());

Point web app hosted on azure to a database on azure

1 Answers1