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

Posted 2023-03-04

【中文标题】AJAX POST、PUT 和 DELETE 工作正常，但 GET 被 CORS 阻止

【英文标题】：AJAX POST,PUT and DELETE are working fine but GET is blocked by CORS

【发布时间】：2020-08-23 23:34:56

【问题描述】：

我在我的第一个 API 上使用 Java + Spring + phpmyadmin 和纯 html + JS，并试图了解 ajax 的工作原理，问题是我成功地进行了 POST、PUT 和 DELETE，但是当我试图通过 id ajax 执行 GET（类似于 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 事情感到很迷茫，所以我会感谢大家提供的任何线索！感谢并为我的英语感到抱歉！

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

看这里：***.com/questions/43871637/…

@sideshowbarker 它只是说“失败”：S 类型为“xhr”

Firefox devtools 中的网络窗格显示什么？

在 Chrome devtools 的控制台窗格中，您是否检查了 Log XMLHttpRequests？

【参考方案1】：

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

let shownPlayer = $.param(playerToShow);

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

参数 - “id=1234”

【讨论】：

现在CORS的问题似乎解决了！ $.param 的工作方式类似于 JSONP？我想了解它是如何工作的。无论如何，现在我有一个 GET 400 错误，有什么新线索吗？哈哈，还是谢谢！

您可以将 JSON 数据放入 GET 请求的正文中，但您的代码是将 JSON 字符串化数据放入查询字符串中。 localhost/dices/player/id?"\"id\":\"1234\""

您可以在控制台中查看 AJAX 请求，并查看应该向您显示发生了什么的请求数据和 URL。我将在答案中添加不同之处。

400 错误是什么样的？我想你可以再问一个问题。

但是我使用了相同的 JSON 和 DELETE by id 并且它工作正常，没有 CORS 问题并且获得了我的数据库的正确对象，它应该导致同样的问题吧？

【参考方案2】：

尝试将其添加到您的 doFilter 方法中，就在 chain.doFilter 行之前

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