Angular 7 app getting CORS error from angular client












2















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?










share|improve this question

























  • What’s the HTTP status code of the response?

    – sideshowbarker
    Nov 27 '18 at 3:45
















2















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?










share|improve this question

























  • What’s the HTTP status code of the response?

    – sideshowbarker
    Nov 27 '18 at 3:45














2












2








2


0






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?










share|improve this 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?







node.js angular express cors angular7






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 10 '18 at 6:59









Goncalo Peres

1,4541519




1,4541519










asked Nov 26 '18 at 1:40









Arup SarkarArup Sarkar

3411412




3411412













  • What’s the HTTP status code of the response?

    – sideshowbarker
    Nov 27 '18 at 3:45



















  • What’s the HTTP status code of the response?

    – sideshowbarker
    Nov 27 '18 at 3:45

















What’s the HTTP status code of the response?

– sideshowbarker
Nov 27 '18 at 3:45





What’s the HTTP status code of the response?

– sideshowbarker
Nov 27 '18 at 3:45












4 Answers
4






active

oldest

votes


















3














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!






share|improve this answer































    0














    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.






    share|improve this answer
























    • 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.

      – Arup Sarkar
      Nov 26 '18 at 4:39











    • @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

      – piotr szybicki
      Nov 26 '18 at 8:33



















    0














    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






    share|improve this answer































      0














      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.






      share|improve this answer























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473754%2fangular-7-app-getting-cors-error-from-angular-client%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        3














        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!






        share|improve this answer




























          3














          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!






          share|improve this answer


























            3












            3








            3







            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!






            share|improve this answer













            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!







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Dec 7 '18 at 15:38









            Freestyle09Freestyle09

            201216




            201216

























                0














                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.






                share|improve this answer
























                • 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.

                  – Arup Sarkar
                  Nov 26 '18 at 4:39











                • @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

                  – piotr szybicki
                  Nov 26 '18 at 8:33
















                0














                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.






                share|improve this answer
























                • 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.

                  – Arup Sarkar
                  Nov 26 '18 at 4:39











                • @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

                  – piotr szybicki
                  Nov 26 '18 at 8:33














                0












                0








                0







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 26 '18 at 3:50









                Saddam PojeeSaddam Pojee

                73819




                73819













                • 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.

                  – Arup Sarkar
                  Nov 26 '18 at 4:39











                • @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

                  – piotr szybicki
                  Nov 26 '18 at 8:33



















                • 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.

                  – Arup Sarkar
                  Nov 26 '18 at 4:39











                • @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

                  – piotr szybicki
                  Nov 26 '18 at 8:33

















                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.

                – Arup Sarkar
                Nov 26 '18 at 4:39





                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.

                – Arup Sarkar
                Nov 26 '18 at 4:39













                @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

                – piotr szybicki
                Nov 26 '18 at 8:33





                @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

                – piotr szybicki
                Nov 26 '18 at 8:33











                0














                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






                share|improve this answer




























                  0














                  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






                  share|improve this answer


























                    0












                    0








                    0







                    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






                    share|improve this answer













                    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







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 26 '18 at 8:31









                    piotr szybickipiotr szybicki

                    631410




                    631410























                        0














                        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.






                        share|improve this answer




























                          0














                          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.






                          share|improve this answer


























                            0












                            0








                            0







                            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.






                            share|improve this answer













                            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.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 28 '18 at 1:34









                            Arup SarkarArup Sarkar

                            3411412




                            3411412






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473754%2fangular-7-app-getting-cors-error-from-angular-client%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                                Calculate evaluation metrics using cross_val_predict sklearn

                                Insert data from modal to MySQL (multiple modal on website)