时间戳

首页 > 解决方案 > AJAX POST、PUT 和 DELETE 工作正常，但 GET 被 CORS 阻止

javascript - AJAX POST、PUT 和 DELETE 工作正常，但 GET 被 CORS 阻止

问题描述

我在我的第一个 API 上使用 Java + Spring + PHPmyadmin 和纯 HTML + JS，并试图了解 ajax 是如何工作的，问题是我成功地执行了 POST、PUT 和 DELETE，但是当我尝试执行 GET通过 id ajax（类似于 DELETE one）chrome 正在向我返回 CORS 错误

从源“ http://localhost ”访问“ http://localhost:8081/dices/players/id ?{%22id%22:%22408%22}”的 XMLHttpRequest已被 CORS 策略阻止：对预检的响应请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头”。

我不明白为什么我只有在尝试 GET 时才会得到这个，而其他操作都可以正常工作……API 的完整“后部”也可以正常工作，并且已经过 POSTMAN 测试。这是我在 Java 中的 CORS 过滤器（我不知道它是如何工作的 100%）：

@Component
public class SimpleCORSFilter implements Filter {
    private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);
    public SimpleCORSFilter() {
        log.info("SimpleCORSFilter init");
    }
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept, X-HTTP-Method-Override, X-Requested-With, remember-me");
        chain.doFilter(req, res);
    }
    @Override
    public void init(FilterConfig filterConfig) {
    }
}

这是我在 JS 中的函数（几乎与 DELETE by id 相同，工作正常）

//GET PLAYER BY ID

function getById() {

    let playerID = document.getElementById("playerID").value;

        let playerToShow = {
            id: playerID,
        }

        let shownPlayer = JSON.stringify(playerToShow);

        $.ajax({
            type: "GET",
            url: "http://localhost:8081/dices/players/id",
            contentType: "application/json",
            data: shownPlayer, 
            success: function (data) {

                document.getElementById("data").innerHTML = JSON.stringify(data);
                console.log(data);
            },
            error: function () {

                alert("Something went wrong!);
            }
        });
    } 
}

我对所有这些 CORS 事情感到很迷茫，所以我会感谢你们所有人提供的任何线索！谢谢和对不起我的英语！

标签： javascriptjavaajaxspringcors

解决方案

我想我明白了。您需要将查询字符串参数而不是 JSON 数据传入 GET。

let shownPlayer = $.param(playerToShow);

字符串化 - "{\"id\":\"1234\"}"

参数-“id=1234”

推荐阅读