Я новичок в веб-разработке и у меня есть эта проблема в течение некоторого времени. Я перепробовал много вещей, которые были предложены на SO и в других местах, но не повезло. В любом случае, я объясню, что я делаю.
Я пытаюсь выполнить простое упражнение, где у меня есть простая HTML-страница, которая принимает название города и, нажав кнопку «Отправить», покажет мне погоду этого города. HTML-код показан ниже:
<body>
<form>
<div>
<label for="city">City</label>
<input id="city" type="text" name="city">
</div>
<div>
<input id="submitButton" type="button" name="submitButton" value="Get weather!" onclick="send()">
</div>
</form>
<script type="text/javascript" src="CityWeather.js"></script>
</body>
Этот HTML-файл вызывает мой JS-скрипт, который будет обрабатывать вызов API OpenWeatherMap и отображать результаты. Код для JS приведен ниже (обратите внимание, что я намеренно опустил ключ api_key, но реальный URL его имеет):
function send() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=london&APPID=<api_key>", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send();
var jsonResponseText = xhttp.responseText;
//var response = JSON.parse(jsonResponseText);
console.log(xhttp.readyState);
console.log(xhttp.status);
console.log(jsonResponseText);
}
Теперь, когда я впервые попытался получить результаты, просто запустив HTML-файл, у меня возникла проблема с CORS, и я понял, что не должен вызывать API через URL файла (file: //). Поэтому я скачал Tomcat 9.0 и поместил оба файла, HTML и JS, в папку веб-приложений Tomcat. Затем я запустил Tomcat и запустил страницу. Тем не менее, я получаю исключения, указанные ниже:
OPTIONS http://api.openweathermap.org/data/2.5/weather?q=london&APPID=<api_key> 405 (Method Not Allowed)
Failed to load http://api.openweathermap.org/data/2.5/weather?q=london&APPID=<api_key>: Response for preflight has invalid HTTP status code 405.
Я попытался обновить файл CATALINA_BASE / conf / web.xml с помощью следующих записей:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
перезагрузил сервер и попробовал снова, но все равно не повезло. Может ли кто-нибудь помочь мне, указав, что нужно сделать? Я использую Chrome для этого упражнения. Я пытался использовать IE, но не повезло.
ОБНОВЛЕНИЕ 1:
Я попытался изменить вызов API. Вместо того чтобы использовать API openweathermap, я попытался использовать GIT API для получения своих репозиториев.
function send() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://api.github.com/users/bhavyas66", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send();
var jsonResponseText = xhttp.responseText;
//var response = JSON.parse(jsonResponseText);
console.log(xhttp.readyState);
console.log(xhttp.status);
console.log(jsonResponseText);
}
В этом случае я не получил вышеупомянутые исключения, но состояние застряло на 1, а напечатанное состояние равно 0. Ответ также пуст. Однако, когда я открываю окно Chrome Network, я вижу, что на вкладке Preview есть ответ