MITRADebarthaGECoreTechCyber-2843 avatar image
0 Votes"
MITRADebarthaGECoreTechCyber-2843 asked MITRADebarthaGECoreTechCyber-2843 commented

How will I use host HTML on azure web app and use Ajax of HTML page to call another web app?

I am new in azure web app and having some issue with hosting HTML on azure portal and ajax call. I am having two critical issues.

First issue, I have a HTML page which I want to host on azure web app. Running the below code works but eventually it hosts my HTML on windows OS.

az webapp up -n surveyordemohtmlpage --html -g MyResource-Group --plan MyPlan -l westeurope

I have another flask app which I have hosted on linux OS in azure web app. So, I need to host the HTML with same os (linux) similar like flask web app.

The reason behind is that HTML page will call that flask web app using ajax. So, I think both needs to be in same domain.

Moving to my second issue, that how will I use ajax call in HTML page? should I use URL "" to call the flak web app?

Any suggestions will help here.

Thanks in advance.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ryanchill avatar image
0 Votes"
ryanchill answered MITRADebarthaGECoreTechCyber-2843 commented

Hi @MITRADebarthaGECoreTechCyber-2843,

Since you app is flask app, you can add a requirements.txt to your root folder (if you haven't already) and run az webapp up -n surveyordemohtmlpage -g MyResource-Group --plan MyPlan -l westeurope.

Using ajax, make sure you have the js library referenced, <script src=""></script> and towards the bottom of your html add

 $(document).ready(function() {
      $('form').on('submit', function(event) {
           data : {
              emailbody : $('#emailbody').val(),
              subject: $('#subject').val(),
              type : 'POST',
              url : ''
         .done(function(data) {

where /flaskfunction is

 def flaskfunction:
     """ Process the request body """

· 8
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Do I need to place the static HTML page (from where I will use ajax to call the flask) in the same azure web app like flask app is in or I can place the HTML page in another web app and call the flask web app?
Please, let me know

0 Votes 0 ·

@ryanchill I used storage account to host my HTML page and I am able to host it properly over there.
Now, I having issue with CORS . I have already enable the CORS in my ajax and also in my flask app.
I have tested the ajax scenario in two ways.

First, I just run my HTML page from my storage account and when I submit it shows me CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In second way, I went to CORS section under API of my Flask web app on azure and put my storage account website link which is and tested it. But, it didn't work and got issue that
<p>The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.</p>

0 Votes 0 ·

@ryanchill Can you please suggest me what mistake I am doing here.
I have put my ajax call code and flask app code for your reference

0 Votes 0 ·

see my ajax call below

<!--ajax post value-->

var request = $.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
url: "", // it's the URL
processData: false,
data: jsonstring, // serializes the form's elements
dataType: 'text',
async: false,
crossDomain: true,
contentType: 'application/json; charset=utf-8',
headers: { 'Access-Control-Allow-Origin':'*' },
success: function()
e.preventDefault(); jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
request.done(function( msg ) {
setTimeout(function() { $("#myElem").hide(); }, 5000);
0 Votes 0 ·
Show more comments
ryanchill avatar image ryanchill MITRADebarthaGECoreTechCyber-2843 ·

@MITRADebarthaGECoreTechCyber-2843 and you enabled CORS on your flask API app service?

0 Votes 0 ·

@ryanchill I mean I have put the static website's link on the CORS section under API on azure portal , I didnt run the command manually. Do I need to run any command ? can you please check my code as well, i might make some mistakes in the code itself. thanks in advance

0 Votes 0 ·
Show more comments