Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Call Azure Function from Javascript

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

enter image description here

Please let me know if you need any more information

like image 407
Sai Bhasker Raju Avatar asked Jul 26 '17 16:07

Sai Bhasker Raju


People also ask

How do I run Azure function locally?

Copy the settings file to the root of the Functions project next to the DLL, open a command prompt from there, and run “func start.” The Function will run based off the same trigger it would use if hosted in Azure or it can be manually triggered for testing using a local HTTP endpoint.

How do you define a function in JavaScript?

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

What is Website_run_from_package?

Using WEBSITE_RUN_FROM_PACKAGE = URL. This section provides information about how to run your function app from a package deployed to a URL endpoint. This option is the only one supported for running from a package on Linux hosted in a Consumption plan.


1 Answers

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:

enter image description here

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

enter image description here

like image 157
Jesse Carter Avatar answered Sep 25 '22 18:09

Jesse Carter