title: Front-end (HTML) is not fetching data in spring boot app from mysql database in Microsoft Azure
body: <p>I am trying to fetch data from MySQL database which is hosted in Microsoft Azure and my spring boot maven app is also deployed in Azure.</p>
  
  <p>When I am hitting my data hosting link, it displays data in JSON format on a web browser. For Example - <a href="https://xyz.azurewebsites.net/checklist" rel="nofollow noreferrer">https://xyz.azurewebsites.net/checklist</a> displays data in JSON format.</p>
  
  <p>On the other end When I am hitting my front-end link, it displays my design. For Example - <a href="https://xyz.azurewebsites.net/search.html" rel="nofollow noreferrer">https://xyz.azurewebsites.net/search.html</a> displays HTML view.</p>
  
  <p>Note - This complete app working fine on local server //localhost/3306. But it is not running fine when I am deploying it on Microsoft Azure. Kind of mismatch issue.</p>
  
  <p>Where am I doing a mistake?</p>
  
  <p><strong>Hierarchy</strong></p>
  
  <pre><code> |-Project
     |-src/main/java
       |-Controller
       |-DAO
       |-Entity
       |-Main
       |-Repository
       |-Service
       |-src/main/resources
       |-Static
          |- Search.html
          |- Index.html
       |-application.properties
  </code></pre>
  
  <p><strong>Pom.xml</strong></p>
  
  <pre><code>project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"&gt;
  &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
  &lt;groupId&gt;com.example&lt;/groupId&gt;
  &lt;artifactId&gt;CheckListMavenWebThree&lt;/artifactId&gt;
  &lt;version&gt;0.0.1-SNAPSHOT&lt;/version&gt;
  &lt;packaging&gt;war&lt;/packaging&gt;
  
  &lt;!-- &lt;parent&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-parent&lt;/artifactId&gt; 
      &lt;version&gt;1.4.7.RELEASE&lt;/version&gt; &lt;/parent&gt; --&gt;
  &lt;dependencies&gt;
  
      &lt;!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-
  boot-starter-web --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
          &lt;version&gt;1.4.7.RELEASE&lt;/version&gt;
      &lt;/dependency&gt;
  
  
      &lt;!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-data-jpa&lt;/artifactId&gt;
          &lt;version&gt;1.4.7.RELEASE&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;mysql&lt;/groupId&gt;
          &lt;artifactId&gt;mysql-connector-java&lt;/artifactId&gt;
          &lt;version&gt;6.0.6&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-tomcat&lt;/artifactId&gt;
          &lt;version&gt;1.5.6.RELEASE&lt;/version&gt;
          &lt;scope&gt;provided&lt;/scope&gt;
      &lt;/dependency&gt;
      &lt;!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter&lt;/artifactId&gt;
          &lt;version&gt;1.5.6.RELEASE&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-envers --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.data&lt;/groupId&gt;
          &lt;artifactId&gt;spring-data-envers&lt;/artifactId&gt;
          &lt;version&gt;1.1.6.RELEASE&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-envers --&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.hibernate&lt;/groupId&gt;
          &lt;artifactId&gt;hibernate-envers&lt;/artifactId&gt;
          &lt;version&gt;5.2.10.Final&lt;/version&gt;
      &lt;/dependency&gt;
  
  
  &lt;/dependencies&gt;
  
  &lt;properties&gt;
      &lt;java.version&gt;1.8&lt;/java.version&gt;
  &lt;/properties&gt;
  &lt;build&gt;
      &lt;testSourceDirectory&gt;src/main/test&lt;/testSourceDirectory&gt;
      &lt;resources&gt;
          &lt;resource&gt;
              &lt;directory&gt;src/main/resources&lt;/directory&gt;
              &lt;excludes&gt;
                  &lt;exclude&gt;**/*.java&lt;/exclude&gt;
              &lt;/excludes&gt;
          &lt;/resource&gt;
          &lt;!-- &lt;resource&gt; &lt;directory&gt;src/main/webapp&lt;/directory&gt; &lt;excludes&gt; &lt;exclude&gt;**/*.java&lt;/exclude&gt; 
              &lt;/excludes&gt; &lt;/resource&gt; --&gt;
      &lt;/resources&gt;
      &lt;plugins&gt;
          &lt;plugin&gt;
              &lt;artifactId&gt;maven-compiler-plugin&lt;/artifactId&gt;
              &lt;version&gt;3.6.1&lt;/version&gt;
  
              &lt;configuration&gt;
                  &lt;source&gt;1.8&lt;/source&gt;
                  &lt;target&gt;1.8&lt;/target&gt;
              &lt;/configuration&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
              &lt;groupId&gt;org.apache.tomcat.maven&lt;/groupId&gt;
              &lt;artifactId&gt;tomcat7-maven-plugin&lt;/artifactId&gt;
              &lt;version&gt;7&lt;/version&gt;
          &lt;/plugin&gt;
          &lt;plugin&gt;
              &lt;artifactId&gt;maven-war-plugin&lt;/artifactId&gt;
              &lt;version&gt;3.0.0&lt;/version&gt;
          &lt;/plugin&gt;
      &lt;/plugins&gt;
  &lt;/build&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Controller.java</strong> (able to fetch data on host(Azure))</p>
  
  <pre><code>package com.example.Controller;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.PathVariable;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.ResponseBody;
  import org.springframework.http.MediaType;
  
  import com.example.Entity.Checklist;
  import com.example.Service.CheckListService;
  
  @Controller
  public class CheckListController {
  @Autowired
  private CheckListService checkListService;
  
  @RequestMapping(value = "/checklist" , method = RequestMethod.GET)
  @ResponseBody
  public Object index() {
      return checkListService.findAll();
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', [ 'ngResource' ]);
  app.controller('CheckListController', [
      '$scope',
      '$resource',
      function($scope, $resource) {
          function fetchAllCheckList() {
              $scope.CheckList = 
  $resource('http://localhost:8080/CheckListMavenWebThree/checklist')
                      .query(function(data) {
                          console.log(data);
                          $scope.Message = data;
                          return data;
                      });
          };
  
          fetchAllCheckList();
          $scope.refresh = function() {
              fetchAllCheckList();
              console.log(fetchAllCheckList());
          };
  </code></pre>
  
  <p><strong>Search.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;CheckList&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="./css/right-panel.css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp" onload="javascript:closeNav()"&gt;
  &lt;div ng-controller="CheckListController" id="main"&gt;
  
  &lt;div &gt;
  
          &lt;span style="font-size: 23px; cursor: pointer"     onclick="openNav()"&gt;&amp;#9776;
              Search&lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;form name="checkListForm" id="main"&gt;
  
          &lt;table border="2" &gt;
  
  
              &lt;tr&gt;
                  &lt;th&gt;Site_Name&lt;/th&gt;
                  &lt;th&gt;WSC_Serial_Number&lt;/th&gt;
                  &lt;th&gt;CheckList_01&lt;/th&gt;
                  &lt;th&gt;CheckList_02&lt;/th&gt;
                  &lt;th&gt;CheckList_03&lt;/th&gt;
                  &lt;th&gt;CheckList_04&lt;/th&gt;
                  &lt;th&gt;CheckList_05&lt;/th&gt;
                  &lt;th&gt;CheckList_06&lt;/th&gt;
                  &lt;th&gt;CheckList_07&lt;/th&gt;
                  &lt;th&gt;CheckList_08&lt;/th&gt;
                  &lt;th&gt;CheckList_09&lt;/th&gt;
                  &lt;th&gt;CheckList_10&lt;/th&gt;
                  &lt;th&gt;CheckList_11&lt;/th&gt;
                  &lt;th&gt;CheckList_12&lt;/th&gt;
                  &lt;th&gt;CheckList_13&lt;/th&gt;
                  &lt;th&gt;CheckList_14&lt;/th&gt;
                  &lt;th&gt;Notes&lt;/th&gt;
                  &lt;th&gt;Completed_By&lt;/th&gt;
                  &lt;th&gt;Setup_Tech&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
              &lt;/tr&gt;
              &lt;div&gt;&lt;label style="font-size:18px; font-family: "Lato", sans-serif;"&gt;Search: &lt;input ng-model="search.$"&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;
              &lt;tr ng-repeat="row in CheckList  | filter:search:strict"&gt;
                  &lt;td&gt;&lt;span ng-bind="row.site_Name"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.wsc_Serial_Number"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_01"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_02"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_03"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_04"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_05"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_06"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_07"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_08"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_09"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_10"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_11"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_12"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_13"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.checkList_14"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.notes"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.completed_By"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.setup_Tech"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="row.date"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;
              &lt;/tr&gt;
          &lt;/div&gt;
          &lt;/table&gt;
  
          &lt;div id="mySidenav" class="sidenav" onmouseover="openNav()"
              onmouseleave="closeNav()"&gt;
              &lt;!--  &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt; --&gt;
  
              &lt;a href="search.html"&gt;&amp;nbsp;&amp;#9906;&amp;nbsp;&amp;nbsp;Search&lt;/a&gt; &lt;a
                  href="createnew.html"&gt;&amp;#169;&amp;nbsp;&amp;nbsp;Create&lt;/a&gt; &lt;a href="update.html"&gt;&amp;#9851;&amp;nbsp;&amp;nbsp;Update&lt;/a&gt;
              &lt;a href="delete.html"&gt;&amp;#9762;&amp;nbsp;&amp;nbsp;Delete&lt;/a&gt;
              &lt;a href="earth.html"&gt;&amp;#9762;&amp;nbsp;&amp;nbsp;Earth&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;span&gt;&lt;button type="button" data-ng-click="refresh()" id="refresh"&gt;Refresh&lt;/button&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;script type='text/javascript'  src="./js/rightpanel.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'  src="./js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'  src="./js/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src="js/app.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="./css/style.css"&gt;
  &lt;link rel="stylesheet" href="./css/theme-default.css"&gt;
  &lt;link rel="stylesheet" href="./css/theme-blue.css"&gt;
  &lt;link rel="stylesheet" href="./css/bootstrap.min.css"&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>Web.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;configuration&gt;
  &lt;system.webServer&gt;
  &lt;handlers&gt;
    &lt;add name="httpPlatformHandler" path="*" verb="*" 
  modules="httpPlatformHandler" resourceType="Unspecified" /&gt;
  &lt;/handlers&gt;
  &lt;httpPlatform processPath="%JAVA_HOME%\bin\java.exe"
      arguments="-Djava.net.preferIPv4Stack=true -
  Dserver.port=%HTTP_PLATFORM_PORT% -jar &amp;quot;%HOME%\site\wwwroot\gs-spring-
  boot-0.1.0.jar&amp;quot;"&gt;
  &lt;/httpPlatform&gt;
  &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p><strong>Application.properties</strong> (I am naive so I just learned and tried to implement. Is application.properties is correct? It allow me to connect mysql with azure from local host also)</p>
  
  <pre><code>spring.mvc.view.prefix=/static/js/
  spring.mvc.view.suffix=.jsp
  spring.datasource.url=jdbc:mysql://*****.mysql.database.azure.com:3306/*****?    verifyServerCertificate=true&amp;useSSL=true&amp;requireSSL=false&amp;serverTimezone=UTC
  spring.datasource.username:*******@*******server
  spring.datasource.password:*******
  spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  
  
  # Keep the connection alive if idle for a long time (needed in production)
  spring.datasource.testWhileIdle = true
  spring.datasource.validationQuery = SELECT 1
  
  # Show or not log for each sql query
  spring.jpa.show-sql = true
  
  # Hibernate ddl auto (create, create-drop, update)
  spring.jpa.hibernate.ddl-auto = update
  
  # Naming strategy
  spring.jpa.hibernate.naming-strategy =     org.hibernate.cfg.ImprovedNamingStrategy
  
  # Use spring.jpa.properties.* for Hibernate native properties (the prefix is
  # stripped before adding them to the entity manager)
  
  # The SQL dialect makes Hibernate generate better SQL for the chosen     database
  spring.jpa.properties.hibernate.dialect =     org.hibernate.dialect.MySQL5Dialect
  logging.level.org.hibernate.SQL:debug
  
  #naming convention according to me
  spring.jpa.hibernate.naming.physical-    strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
  </code></pre>
  
  <p>What stuff Am I doing wrong? Is that hosting link issue?</p>