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

Question

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

MITRA, Debartha (GE CoreTech & Cyber) 51

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 "*https://myflaskapp.azurewebsites.net/flaskfunction*" to call the flak web app?

Any suggestions will help here.

Thanks in advance.

1 answer

Your answer

Answer 1

Ryan Hill 30,326 Microsoft Employee Moderator

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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> and towards the bottom of your html add

 $(document).ready(function() {
      $('form').on('submit', function(event) {
        $.ajax({
           data : {
              emailbody : $('#emailbody').val(),
              subject: $('#subject').val(),
                  },
              type : 'POST',
              url : 'https://myflaskapp.azurewebsites.net/flaskfunction'
             })
         .done(function(data) {
           Console.log(data);
       });
       event.preventDefault();
       });
 });

where /flaskfunction is

 @app.route('/flaskfunction','POST')
 def flaskfunction:
     """ Process the request body """

MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-19T08:03:53.27+00:00

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
MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-19T15:29:57.077+00:00

@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 https://demohtmlstorageaccount.z6.web.core.windows.net 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>**
MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-19T15:31:27.447+00:00

@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

MITRA, Debartha (GE CoreTech & Cyber) 51

see my ajax call below

var request = $.ajax({
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    url: "https://azuredemocalledflask.azurewebsites.net/testjson", // 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();
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});
request.done(function( msg ) {
  console.log('Success');
  $("#myElem").show();
  setTimeout(function() { $("#myElem").hide(); }, 5000);
});

MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-19T15:37:15.9+00:00

flask app

from flask import Flask, request

from flask_cors import CORS, cross_origin

app = Flask(name)
CORS(app, support_credentials=True)

@app.route('/testjson', methods=['POST'])
@cross_origin(supports_credentials=True)
def testjsonhandler():
print(request.is_json)
data = request.get_json(force=True)
print(data)
return 'json'

if name == "main":
app.run()
Ryan Hill 30,326 Reputation points Microsoft Employee Moderator

2020-06-19T17:40:39.057+00:00

@MITRA, Debartha (GE CoreTech & Cyber) and you enabled CORS on your flask API app service?
MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-19T18:11:57.093+00:00

@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
MITRA, Debartha (GE CoreTech & Cyber) 51 Reputation points

2020-06-21T19:21:44.463+00:00

@ryanchill I have got the solution, I did some mistake back in my code. Thank you for your support.

Share via

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

1 answer

Your answer