Angular 7 app getting CORS error from angular client

Question

I have developed an angular 7 app with express backend. Express running on localhost:3000 and angular client is running on localhost:4200.

In the server.js I have (not the entire code)

const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

In the api.js file, I have router.get(‘/oauth2/login’) which redirects to https://example.com which sends an access token and authenticates the user (OAuth2 authentication).

When I am calling the url http://localhost:3000/api/oauth2/login everything is working fine, but when I am trying to do the same from angular component.ts -> service.ts I am getting the following error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource Reason: CORS header ‘Access-Control-Allow-Origin’ missing

Angular app flow as follows login.component.ts which has a button calling a service api.service.ts which executes a http get.

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

api.service.ts

login() {
  console.log('DEBUG: APiService login(): ', 'login() function.');
  const URL = 'oauth2/login';
  console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
  return this.http.get(`${environment.baseUrl}/${URL}`)
    .pipe( map( res => res ));
}

Can someone help me get past the error? I have a) CORS b) serving static files from server.js as

app.use(express.static(__dirname + '/dist/sfdc-event'));

c) dynamic environment variable. What else I am missing?

Solution 1

If this is just for development I recommend using proxy that comes with angular-cli. Create a file called proxy.json

and

{
  "/api/oauth2/login": {
    "target": "http://localhost:3000/api/oauth2/login",
    "secure": false
  }
}

and the call ng serve --proxy-config proxy.json. If you expect this to be still a problem in production then we have to have a bigger conversation.

Full documentation: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Also what is CORS exacly: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Solution 2

For Angular 7 you must do other implementation. From angular documentation you must create a proxy.js file:

https://angular.io/guide/build#using-corporate-proxy

Edit the path for your own backend server.

proxy.js:

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

Later add this to your package.json

"start": "ng serve --proxy-config proxy.js"

And call this with:

npm start

And in your app.js just simply add:

const cors = require("cors");
app.use(cors());

I had same problem and that solved my issue. I hope it helps!

Solution 3

To divert all calls for http://localhost:4200/api to a server running on http://localhost:3000/api, take the following steps.

1. Create a file proxy.conf.json in the projects src/ folder, next to package.json.

2. Add the following content to the new proxy file:

{
    "/api": {
        "target": "`http://localhost:3000`",
        "secure": false
    }
}

3. In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

...
"architect": {
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "your-application-name:build",
            "proxyConfig": "src/proxy.conf.json"
        },
    ...
    }
}
...

4. To run the dev server with this proxy configuration, call ng serve.

Solution 4

I have been working with Angular cli and .net Framework in server side.

To solve this problem, I just ennable CORS interaction in server side using the following steps:

1. Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6

   And then, into WebApiConfig class:

2. Add using System.Web.Http.Cors;

3. Inside Register(HttpConfiguration config) method:

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");

config.EnableCors(cors);

or

var cors = new EnableCorsAttribute("*", "*", "*"); //origin, headers, methods

config.EnableCors(cors);

Solution 5

I changed the callback mechanism to get past the CORS issue, I am utilizing a OAuth flow for the user to get authenticated from https://example.com which was redirecting to https://example.com/auth/callback, I was initiating the request from http://localhost:4200 and then sending the callback url to the server http://localhost:3000 and I was getting the CORS error.

Now, I am redirecting it to the client http://localhost:4200 and got past the CORS problem. All other calls for GET, POST, DELETE, PATCH is from the http://localhost:3000 which is working fine.

Thank you all for your inputs.

View more solutions

Comments

[sideshowbarker]

What’s the HTTP status code of the response?

[Aaron Matthews]

@Arup Sarkar, if applicable kindly mark the correct answer

[Arup Sarkar]

Eventually, this will be hosted on heroku PAAS. I am not sure I can utilize "nginx" server. FYI, I have uploaded the app to heroku and it is the same behavior.

[piotr szybicki]

@ArupSarkar I'm sure there is a CORS header setting in the heroku. Read this article it 10 minutes read and it explaines everything: developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[phenric]

Thx for the explanation. That's what I did but I still have an issue with Angular 9 with Express.js Access to XMLHttpRequest at 'localhost:7777/api/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[Ferie]

@DineshKumar I am not the original owner of this answer, I just edited it to have a clear code format, you should ask TiyebM. In any case, I suppose yes, but I did not try.

[Bigeyes]

Hi, the target is set "localhost:3000`". Then in QA or PRODUCTION, how to set it? We just have one proxy file.

[William]

For .net core, check this out: c-sharpcorner.com/article/…