[英]Difference between GET/POST/PUT/DELETE in Ajax in MVC pattern
[英]AJAX POST,PUT and DELETE are working fine but GET is blocked by CORS
I'm working with Java + Spring + PHPmyadmin and pure HTML + JS on my first API and trying to understand how ajax works and the problem is that I succeded doing a POST, PUT and DELETE but when I'm trying to do a GET通过 id ajax (类似于 DELETE one)chrome 正在返回 CORS 错误
Access to XMLHttpRequest at ' http://localhost:8081/dices/players/id ?{%22id%22:%22408%22}' from origin ' http://localhost ' has been blocked by CORS policy: Response to preflight请求未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”header”。
我不明白为什么我只有在尝试 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 中的 function (几乎与 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 事情感到非常迷茫,所以我会感谢大家提供的任何线索! 谢谢和对不起我的英语!
我想我明白了。 您需要将查询字符串参数而不是 JSON 数据传入 GET。
let shownPlayer = $.param(playerToShow);
字符串化 - "{\"id\":\"1234\"}"
参数-“id=1234”
尝试将其添加到您的 doFilter 方法中,就在 chain.doFilter 行之前
if (request.getMethod().equals("OPTIONS")) {
resp.setStatus(HttpServletResponse.SC_OK);
return;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.