0

I'm trying to deploy an angular application to heroku, and to do so I had to create a sever.js file so that the deployment can be done using node. The problem is that any request from my app to my api app (deployed using container registry in heroku too) is being blocked by cors.

server.js :

function requireHTTPS(req, res, next) {
    // The 'x-forwarded-proto' check is for Heroku
    
    next();
}
const allowedOrigins = ['my-api'];

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
    credentials: true,
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
          console.log(origin);
          callback(null, true) ;
      } else {
        callback(new Error(`Origin: ${origin} is now allowed`))
      }
    }
  }));
app.use(requireHTTPS);
app.use(express.static('./dist/HygeneSpa'));
app.get('/*', function(req, res) {
    res.sendFile('index.html', {root: 'dist/HygeneSpa/'}
  );
});
app.listen(process.env.PORT || 8080);

The error :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at api-app. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

One other thing that I've noticed is that the OPTIONS request does not contain a cors header, but the POST request does.

Mohammed Chanaa
  • 93
  • 2
  • 10

1 Answers1

0

Use this below will work like pro.

//Install express server
const express = require('express');
const path = require('path');
const compression = require('compression')
const app = express();
app.use(compression())

// Serve only the static files form the dist directory
// Replace the '/dist/<to_your_project_name>'
app.use(express.static(__dirname + '/dist/{appname}'));

app.get('*', function (req, res) {
    // Replace the '/dist/<to_your_project_name>/index.html'
    res.sendFile(path.join(__dirname + '/dist/{appname}/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Manojkumar Muthukumar
  • 283
  • 3
  • 10
  • this has nothing to do with the question :/ . I'm already doing this in my file, the only problem is the cors. The application is run succesffully ! but the problem is with the api calls, they all get blocked by cors. – Mohammed Chanaa Aug 13 '21 at 12:10
  • then use proxy-conf.json and re serve the application. https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server – Manojkumar Muthukumar Aug 13 '21 at 12:11
  • when I'm serving the application using ng serve everything works fine, but when I'm using node server.js to run my server I get blocked by cors – Mohammed Chanaa Aug 13 '21 at 12:27
  • Got it. Have you tested your node api with postman for the port of 8080. – Manojkumar Muthukumar Aug 13 '21 at 13:24
  • 1
    The api is being served from a hosted server (.net api) I'm using node server just to run the angular application. 'Im really sorry for the late answer I took a few days off' – Mohammed Chanaa Aug 16 '21 at 18:01