Call Azure Function from Javascript

Question

I have a simple HTML page which has a Textbox and a Submit Button. I have a Azure Function which when hit takes in the content of the textbox, which we should send to the Azure Function and sends mail ( code is written in Azure Function in C# ).

What I Did :

I took the textbox value and called the Function via AJAX but it doesnt hit at all. It sends back 400 Error Code.

All i want is to hit the function using Javascript. Because i just have a plain HTML page and JS is the only means with which i can communicate.

This is the Function URL

https://smtpgmail.azurewebsites.net/api/HttpTriggerCSharp1?code=ihrbDCeo2DPdxPXDKiQWyNFYfaMFZhk9rkaYFaHO3LFsNEmrabj9Cw==

it expects a parameter 'name' and i checked it by pasting in the browser like this

https://smtpgmail.azurewebsites.net/api/HttpTriggerCSharp1?code=ihrbDCeo2DPdxPXDKiQWyNFYfaMFZhk9rkaYFaHO3LFsNEmrabj9Cw==&name=testName

This is what i found in firefox

Please let me know if you need any more information

Usually a 400 means you didn't send all the information the call required. What is the endpoint you are trying to call and what is the data you sent? — Brig, Jul 26 '17 at 16:06
Can you update your question with the exact code and parameter along with the details of the 400 error. Often the 400 error will give additional information with it. — Brig, Jul 26 '17 at 16:10
Are you seeing any errors in the console? Can you share the Simple HTML code you are using? — Naren, Jul 26 '17 at 22:17
The Problem is Solved , please take a look at the below answer and its comment — Sai Bhasker Raju, Jul 27 '17 at 08:48

score 12 · Accepted Answer · answered Jul 26 '17 at 16:45

12

This is definitely a CORS related issue. Luckily, it's easy to configure CORS for Function Apps in the portal. Just navigate to your Function App and then select Platform Features:

Select the CORS option under API which will take you to a screen where you can add the hostname of your clientside application:

answered Jul 26 '17 at 16:45

Jesse Carter

20,062
7
64
101

thanks @jesse , this worked. as of now i am testing from my local machine and the HTML page is not hosted anywhere i added " * " in the list of allowed origins and it worked. thanks mate – Sai Bhasker Raju Jul 27 '17 at 08:32
Sai and Jesse, can I confirm something. We can have a client side only Javascript solution NOT using an authentication library like ADAL to call an AAD authenticated Azure Function? We can't seem to get this to work. Even if the simple client is also running under Azurewebsites domain. – Hell.Bent Oct 17 '17 at 11:14
1

Thank you for saving me a lot of frustration. It's one of Microsofts biggest mistakes and weaknesses: When will they learn to set defaults (like the CORS defaults here) to a value that beginners get the expected result? Don't get me wrong: Azure is great, but defaults like this and not mentioning them in the "Getting Started" tutorial, build extreme hurdles. – jboi Apr 05 '20 at 12:35

score 3 · Answer 2 · answered Jul 26 '17 at 16:20

3

That looks like a cross origin request blocked. Normally you can't make a request from the browser to a different host. You will either need to use CORS or backend code.

Notice the method of the request is OPTIONS instead of Post or Get. Typically this means the browser is blocking the call.

Here is a link to a Node solution. https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-http-webhook

answered Jul 26 '17 at 16:20

Brig

10,211
12
47
71

Thanks Brig , i have gone through the examples but in my case i just have a textbox and a button, so i just want to invoke the Azure Function with this simple setup. I dont want to create a ASPX page or PHP page for this and run on server. if its not possible then its fine. just curious to know – Sai Bhasker Raju Jul 26 '17 at 16:24

Call Azure Function from Javascript

2 Answers2

Linked