Question

我是Web开发的新手，有一段时间了。我尝试了很多在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脚本，该脚本将处理对OpenWeatherMap API的调用并显示结果。 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问题，我意识到我不应该通过文件URL（file：//）来调用API。因此，我下载了Tomcat 9.0，并将HTML和JS文件都放置在Tomcat的webapps文件夹中。然后，我启动了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调用。我没有使用openweathermap API，而是尝试使用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网络窗口时，可以看到“预览”标签下有响应

Answer 1

尝试“ POST”方法，405错误通常与POST方法同时出现

405方法不允许使用Tomcat

1 个答案: