Enable CORS for Azure Rest webapi application












0















I have simple jQuery page that makes calls to azure restful API to get the status of VMs.
I'm facing a problem that it's complaining about Cross-Origin Resource Sharing and I can't find where to set that for the Web app/API I have.



I'm using client credentials grant to get the token
https://docs.microsoft.com/en-us/azure/active-directory/develop/v1-oauth2-client-creds-grant-flow



I have finished my testing and when I tried to do the calls from jQuery/JS I got the CORS problem.



My setup involved:
From Azure portal, I used App registrations to register an app of type "Web app/API", give it a homepage address "this is where it lives", created a key.



Using



POST https://login.microsoftonline.com/<tenant id>/oauth2/token
grant_type=client_credentials
client_id=application id
client_secret=application key
resource=https://management.core.windows.net/


Am I missing any missing anything? my search keeps leading me to Azure hosted apps










share|improve this question



























    0















    I have simple jQuery page that makes calls to azure restful API to get the status of VMs.
    I'm facing a problem that it's complaining about Cross-Origin Resource Sharing and I can't find where to set that for the Web app/API I have.



    I'm using client credentials grant to get the token
    https://docs.microsoft.com/en-us/azure/active-directory/develop/v1-oauth2-client-creds-grant-flow



    I have finished my testing and when I tried to do the calls from jQuery/JS I got the CORS problem.



    My setup involved:
    From Azure portal, I used App registrations to register an app of type "Web app/API", give it a homepage address "this is where it lives", created a key.



    Using



    POST https://login.microsoftonline.com/<tenant id>/oauth2/token
    grant_type=client_credentials
    client_id=application id
    client_secret=application key
    resource=https://management.core.windows.net/


    Am I missing any missing anything? my search keeps leading me to Azure hosted apps










    share|improve this question

























      0












      0








      0








      I have simple jQuery page that makes calls to azure restful API to get the status of VMs.
      I'm facing a problem that it's complaining about Cross-Origin Resource Sharing and I can't find where to set that for the Web app/API I have.



      I'm using client credentials grant to get the token
      https://docs.microsoft.com/en-us/azure/active-directory/develop/v1-oauth2-client-creds-grant-flow



      I have finished my testing and when I tried to do the calls from jQuery/JS I got the CORS problem.



      My setup involved:
      From Azure portal, I used App registrations to register an app of type "Web app/API", give it a homepage address "this is where it lives", created a key.



      Using



      POST https://login.microsoftonline.com/<tenant id>/oauth2/token
      grant_type=client_credentials
      client_id=application id
      client_secret=application key
      resource=https://management.core.windows.net/


      Am I missing any missing anything? my search keeps leading me to Azure hosted apps










      share|improve this question














      I have simple jQuery page that makes calls to azure restful API to get the status of VMs.
      I'm facing a problem that it's complaining about Cross-Origin Resource Sharing and I can't find where to set that for the Web app/API I have.



      I'm using client credentials grant to get the token
      https://docs.microsoft.com/en-us/azure/active-directory/develop/v1-oauth2-client-creds-grant-flow



      I have finished my testing and when I tried to do the calls from jQuery/JS I got the CORS problem.



      My setup involved:
      From Azure portal, I used App registrations to register an app of type "Web app/API", give it a homepage address "this is where it lives", created a key.



      Using



      POST https://login.microsoftonline.com/<tenant id>/oauth2/token
      grant_type=client_credentials
      client_id=application id
      client_secret=application key
      resource=https://management.core.windows.net/


      Am I missing any missing anything? my search keeps leading me to Azure hosted apps







      rest azure oauth-2.0 cors azure-active-directory






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 14 '18 at 10:38









      et3rnalet3rnal

      6429




      6429
























          2 Answers
          2






          active

          oldest

          votes


















          1














          You cannot use a client secret from front-end Javascript.
          Your client secret will be public, it's basically your app's password.



          Client credentials grant is for back-end applications.



          You need to use e.g. the implicit grant flow with ADAL.JS/MSAL.JS to acquire tokens.
          Your front-end app also should be registered as Native since it is a public client.



          Here is a sample app: https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi



          Oh, and the CORS error comes from Azure AD's token endpoint.
          You cannot do anything about it.






          share|improve this answer
























          • I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

            – et3rnal
            Nov 14 '18 at 22:24











          • I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

            – et3rnal
            Nov 15 '18 at 22:33



















          1














          Okay, here is how to do it in short:




          1. Add Function App (charge per request)

          2. Open the Newly created function app

          3. In Proxies, select that from the right list

          4. Give it a name, route template will be your new endpoint URL, backend URL is your login endpoint eg: https://login.microsoftonline.com//oauth2/token

          5. After that, back to your function app, select the platform feature tab, Select CORS, delete all of them and enter your application URL or simply a *


          You can be more specific with these, but this is enough to get the token. And all the other endpoint didn't have CORS problem.



          Good luck.






          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%2f53298224%2fenable-cors-for-azure-rest-webapi-application%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            You cannot use a client secret from front-end Javascript.
            Your client secret will be public, it's basically your app's password.



            Client credentials grant is for back-end applications.



            You need to use e.g. the implicit grant flow with ADAL.JS/MSAL.JS to acquire tokens.
            Your front-end app also should be registered as Native since it is a public client.



            Here is a sample app: https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi



            Oh, and the CORS error comes from Azure AD's token endpoint.
            You cannot do anything about it.






            share|improve this answer
























            • I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

              – et3rnal
              Nov 14 '18 at 22:24











            • I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

              – et3rnal
              Nov 15 '18 at 22:33
















            1














            You cannot use a client secret from front-end Javascript.
            Your client secret will be public, it's basically your app's password.



            Client credentials grant is for back-end applications.



            You need to use e.g. the implicit grant flow with ADAL.JS/MSAL.JS to acquire tokens.
            Your front-end app also should be registered as Native since it is a public client.



            Here is a sample app: https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi



            Oh, and the CORS error comes from Azure AD's token endpoint.
            You cannot do anything about it.






            share|improve this answer
























            • I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

              – et3rnal
              Nov 14 '18 at 22:24











            • I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

              – et3rnal
              Nov 15 '18 at 22:33














            1












            1








            1







            You cannot use a client secret from front-end Javascript.
            Your client secret will be public, it's basically your app's password.



            Client credentials grant is for back-end applications.



            You need to use e.g. the implicit grant flow with ADAL.JS/MSAL.JS to acquire tokens.
            Your front-end app also should be registered as Native since it is a public client.



            Here is a sample app: https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi



            Oh, and the CORS error comes from Azure AD's token endpoint.
            You cannot do anything about it.






            share|improve this answer













            You cannot use a client secret from front-end Javascript.
            Your client secret will be public, it's basically your app's password.



            Client credentials grant is for back-end applications.



            You need to use e.g. the implicit grant flow with ADAL.JS/MSAL.JS to acquire tokens.
            Your front-end app also should be registered as Native since it is a public client.



            Here is a sample app: https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi



            Oh, and the CORS error comes from Azure AD's token endpoint.
            You cannot do anything about it.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 14 '18 at 10:47









            juunasjuunas

            22.1k34880




            22.1k34880













            • I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

              – et3rnal
              Nov 14 '18 at 22:24











            • I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

              – et3rnal
              Nov 15 '18 at 22:33



















            • I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

              – et3rnal
              Nov 14 '18 at 22:24











            • I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

              – et3rnal
              Nov 15 '18 at 22:33

















            I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

            – et3rnal
            Nov 14 '18 at 22:24





            I need something that doesn't ask for the user to log in, we have another local authentication on top of this. having the password publicly is not a problem as it's only accessible by few people. This is why I used client credentials.

            – et3rnal
            Nov 14 '18 at 22:24













            I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

            – et3rnal
            Nov 15 '18 at 22:33





            I have solved the issue, I will post an answer will what I did once I finish everything. but so far I was able to get the token :D

            – et3rnal
            Nov 15 '18 at 22:33













            1














            Okay, here is how to do it in short:




            1. Add Function App (charge per request)

            2. Open the Newly created function app

            3. In Proxies, select that from the right list

            4. Give it a name, route template will be your new endpoint URL, backend URL is your login endpoint eg: https://login.microsoftonline.com//oauth2/token

            5. After that, back to your function app, select the platform feature tab, Select CORS, delete all of them and enter your application URL or simply a *


            You can be more specific with these, but this is enough to get the token. And all the other endpoint didn't have CORS problem.



            Good luck.






            share|improve this answer




























              1














              Okay, here is how to do it in short:




              1. Add Function App (charge per request)

              2. Open the Newly created function app

              3. In Proxies, select that from the right list

              4. Give it a name, route template will be your new endpoint URL, backend URL is your login endpoint eg: https://login.microsoftonline.com//oauth2/token

              5. After that, back to your function app, select the platform feature tab, Select CORS, delete all of them and enter your application URL or simply a *


              You can be more specific with these, but this is enough to get the token. And all the other endpoint didn't have CORS problem.



              Good luck.






              share|improve this answer


























                1












                1








                1







                Okay, here is how to do it in short:




                1. Add Function App (charge per request)

                2. Open the Newly created function app

                3. In Proxies, select that from the right list

                4. Give it a name, route template will be your new endpoint URL, backend URL is your login endpoint eg: https://login.microsoftonline.com//oauth2/token

                5. After that, back to your function app, select the platform feature tab, Select CORS, delete all of them and enter your application URL or simply a *


                You can be more specific with these, but this is enough to get the token. And all the other endpoint didn't have CORS problem.



                Good luck.






                share|improve this answer













                Okay, here is how to do it in short:




                1. Add Function App (charge per request)

                2. Open the Newly created function app

                3. In Proxies, select that from the right list

                4. Give it a name, route template will be your new endpoint URL, backend URL is your login endpoint eg: https://login.microsoftonline.com//oauth2/token

                5. After that, back to your function app, select the platform feature tab, Select CORS, delete all of them and enter your application URL or simply a *


                You can be more specific with these, but this is enough to get the token. And all the other endpoint didn't have CORS problem.



                Good luck.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 19 '18 at 0:06









                et3rnalet3rnal

                6429




                6429






























                    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%2f53298224%2fenable-cors-for-azure-rest-webapi-application%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

                    Florida Star v. B. J. F.

                    Danny Elfman

                    Lugert, Oklahoma