5

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

Improve this question
6
  • 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? Commented Jul 26, 2017 at 16:06
  • it requires a query string variable and i have passed to it Commented Jul 26, 2017 at 16:08
  • 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. Commented Jul 26, 2017 at 16:10
  • Please add your HTTP request to the question Commented Jul 26, 2017 at 16:11
  • Are you seeing any errors in the console? Can you share the Simple HTML code you are using? Commented Jul 26, 2017 at 22:17

2 Answers 2

Reset to default
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:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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

Improve this answer

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.