Nsryjdtyk

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?

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!

Since, your angular app is running on 4200 port and backend running on 3000 port, the origin of both the application is different.

To solve this problem, you can setup "nginx" in your machine.

This will make all your requests from angular and backend, go via "nginx" server. Thus, solving the problem of CORS.

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

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.

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.