I am using javascript to get the height of the screen, and although it works properly locally, when I raise it to the server, the following error message appears and it stops working. I looked up the error message, but I didn't understand it, so please tell me the cause and solution.

Failed to load resource: the server responded with a status of 400 ()
Applicable source code
<!doctype html>
<meta charset="utf-8">
<title>Untitled document</title>
<link rel="stylesheet" href="css/aaa.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/vertical100%.js"></script>
@charset "utf-8";
/* CSS Document */
    background-image: url( "../image/002-subtle-light-pattern.jpg");
// JavaScript Document
$(document).ready(function () {
  hsize = $(window).height();
  $(".main").css("height", hsize + "px");
$(window).resize(function () {
  hsize = $(window).height();
  $(".main").css("height", hsize + "px");
  • Answer # 1


    From javascript file name%Please remove and try.

    In the URL%Symbols are reserved for encoding when dealing with multibyte characters.
    You should be responding to the error without being able to interpret the filename correctly, as if it wasn't encoded correctly.

    Google Search: URL Usable Characters