在前端使用 XMLHttpRequest 发送的 PUT、DELETE 会给出 404 响应，但在 postman 中工作得很好

Question

我有 Spring MVC 和 spring 安全后端 + JS 前端应用程序。 我成功配置了与 POST 和 GET 方法相关的所有内容，以便我可以通过 XMLHttpRequest 发送它们。 但是，当我尝试使用 PUT 或 DELETE 方法时，每次都会收到 404 响应代码。 我读过这不应该是 Chrome 浏览器或 XMLRequests 的问题，因为它们支持 PUT 和 DELETE 方法。 我不知道在这种情况下会出现什么问题。 在 postman 我成功发送了所有的 DELETE 和 PUT 方法，所以我认为这是 cors 配置或前端的问题。

这是我的 cors 配置

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    final CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Collections.singletonList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "DELETE", "PUT"));
    configuration.setMaxAge(3600L);
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

这是 HTML 代码，我在其中添加带有发送请求事件的按钮

   <table id="main-table">
        <tbody id='table-body'>
        </tbody>
    </table>

这是负责创建按钮的函数

export function createButtonField(text, action){
    const td = document.createElement('td');
    const button = document.createElement('button');
    button.appendChild(document.createTextNode(text));
    td.appendChild(button);
    button.addEventListener('click', action);
    return td;
}

这是我 append 按钮到 html 的部分

function createTableRow(i, coins) {
    var tr = document.createElement('tr');
    var object = coins[i];
    tr.appendChild(createButtonField("Track", () => trackCoin(object["id"])));
    return tr;
}

这是负责发送请求的js代码

function trackCoin(id) {
    console.log(id);
    var data = {
        "names": [id]
    }
    console.log(data);
    var json = JSON.stringify(data);
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 202) {
          console.log("sent");
        }
    }
    xhttp.open("DELETE", getBackendURL() + "/coins/user");
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.setRequestHeader('Authorization', 'Bearer ' + getFromLocalStorage("authenticationToken"));
    xhttp.send(json);
}

这是运行 trackCoin 方法后的控制台 output

DELETE http://localhost:8084/api/coins/user 404

这是来自 postman 的 curl

curl --location --request DELETE 'http://localhost:8084/api/coins/user' \
--header 'Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIzIiwiaWF0IjoxNjQzOTI1MDI1LCJleHAiOjE2NDM5MjU2MjV9.hlkcGupwhwiZm1vOnW0OfY4Z4Qp-ehBOUq3ixnB0LA0' \
--header 'Content-Type: application/json' \
--header 'Cookie: JSESSIONID=8479E299C00FDC3B9684821FF953E322' \
--data-raw '
{
    "coinName": "ethereum"
}'

Answer 1

当您将控制台日志与 postman 请求进行比较时，function getBackendURL()正在为您的后端返回错误的 url

在 js 中，您尝试向此端点请求： resource:8084/api/coins/user:1但在 postman 中，您请求： http://localhost:8084/api/coins/user

因此，您应该检查您尝试到达的端点以及您在 xhttp object 中发送的数据

您可以尝试将 URL 硬编码到 xhttp。 像这样的东西：

function trackCoin(id) {
    console.log(id);
    var data = {
        "names": [id]
    }
    console.log(data);
    var json = JSON.stringify(data);
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 202) {
          console.log("sent");
        }
    }
    xhttp.open("DELETE", "localhost:8084/api/coins/user");
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.setRequestHeader('Authorization', 'Bearer ' + getFromLocalStorage("authenticationToken"));
    xhttp.send(json);
}