Enable CORS for Azure Rest webapi application
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
add a comment |
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
add a comment |
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
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
rest azure oauth-2.0 cors azure-active-directory
asked Nov 14 '18 at 10:38
et3rnalet3rnal
6429
6429
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
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
add a comment |
Okay, here is how to do it in short:
- Add Function App (charge per request)
- Open the Newly created function app
- In Proxies, select that from the right list
- 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
- 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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
Okay, here is how to do it in short:
- Add Function App (charge per request)
- Open the Newly created function app
- In Proxies, select that from the right list
- 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
- 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.
add a comment |
Okay, here is how to do it in short:
- Add Function App (charge per request)
- Open the Newly created function app
- In Proxies, select that from the right list
- 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
- 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.
add a comment |
Okay, here is how to do it in short:
- Add Function App (charge per request)
- Open the Newly created function app
- In Proxies, select that from the right list
- 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
- 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.
Okay, here is how to do it in short:
- Add Function App (charge per request)
- Open the Newly created function app
- In Proxies, select that from the right list
- 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
- 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.
answered Nov 19 '18 at 0:06
et3rnalet3rnal
6429
6429
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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