AJAX POST, PUT и DELETE работают нормально, но GET блокируется CORS

Question

Я работаю с Java + Spring + PHPmyadmin и чистым HTML + JS на моем первом API и пытаюсь понять, как работает ajax, и проблема в том, что мне удалось выполнить POST, PUT и DELETE, но когда я пытаюсь выполнить GET по id ajax (аналогично DELETE), chrome возвращает мне ошибку CORS

Доступ к XMLHttpRequest в 'http://localhost: 8081 / dices / Players / id ? {% 22id% 22:% 22408% 22} 'from origin' http://localhost 'заблокировано политикой CORS: ответ на предварительный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin ».

Я не понимаю, почему я получаю это ТОЛЬКО когда я попробуйте GET, и другие действия работают нормально ... Также полная "задняя часть" API работает нормально и была протестирована с POSTMAN. Вот мой фильтр CORS в Java (я точно не знаю, как это работает на 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 по id tha t работает нормально)

//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, так что я благодарю вас всех за любую подсказку, которую вы можете иметь! Спасибо и извините за мой Engli sh!

Answer 1

Думаю, я понял. Вам необходимо передать в GET параметры строки запроса, а не JSON данные.

let shownPlayer = $.param(playerToShow);

stringify - "{\" id \ ": \" 1234 \ "}"

параметр - "id = 1234"

Answer 2

Попробуйте добавить это в свой метод doFilter непосредственно перед строкой chain.doFilter

if (request.getMethod().equals("OPTIONS")) {
    resp.setStatus(HttpServletResponse.SC_OK);
    return;
}