0

I have a HTML page which takes a text from user and send a GET request to spring boot application which is appending some more text to it and returning back to HTML page and I need to show that text to text-area in HTML.

Here is the HTML

    <!DOCTYPE html>
<html>
  <body>
    <h1>Text</h1>
    <script type="text/javascript">
      function convert() {
      
        var host = 'http://localhost:8080/params/';
        var params = document.getElementById("text").value;
        var apiUrl = host+params;
        alert(apiUrl)
        fetch(apiUrl).then(response => {
          return response.json();
        }).then(data => {
          document.getElementById("output").textContent = data;
          console.log(data);
        }).catch(err => {
          // Do something for an error here
        });
      }
    </script>
    <input id="text" type="text" value="" style="Width:50%;height:200px" />
    <p></p>
    <div />
    <button id="btn" onclick="convert()"> Convert </button>
    <p></p>
    <h1>SQL</h1>
    <textarea id="output" rows="30" cols="150"></textarea>
  </body>
</html>

And here is the Spring boot Controller class

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "*")
public class HelloWorldController 
{
    @RequestMapping(value="/params/{textToSql}", method = RequestMethod.GET)
public String hello(@PathVariable String textToSql)
{

    return "New Hello Text - "+textToSql;
}
}

I can't see the response is coming and browser is showing issue which says - 'Ensure CORS response header values are valid'. I even tried to allow all as you can see at Spring bbot controller but still I am not getting any response @CrossOrigin(origins = "*");

Please suggest what needs to be done here to get the response back and show it in below text area.

Update:

When I add alert inside catch block it saying the following:

SyntaxError: Unexpected token 'q', "qadadadaF" is not valid JSON

qadadadaF is the text which I entered and passed as an argument to REST API

0 Answers0