javascript - 关于我的 Spring Rest 服务的 jQuery 和 403 错误以及 Cors 问题40

Question

Spring API is running smoothly.I get this error message when I try to access the data by the client. Even though I added Cors, the problem did not improve. Below I will share my rest controller and ajax methods.

ERROR:

这是我的 spring Rest api url:

http://localhost:8080/getAllPLayers

我也已经将 CrossOrigin 注释添加到我的 Controller

@CrossOrigin(origins = "http://localhost:8000/")
@RestController
public class Controller {
    @Autowired
    FootballService footballService;

    //**PLAYER**
    @GetMapping(value="/getAllPLayers")
    public List<Player> getAllPlayers(){
        return footballService.getPlayerList();
    }
}

依赖关系

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

这里是ajax调用函数

$( document ).ready(function() {

    $("#getAllPlayers").click(function(event){
        event.preventDefault();
        ajaxGet();
    });

    function ajaxGet(){
        $.ajax({
            type : "GET",
            url :  "http://localhost:8080/getAllPLayers/",

            success: function(result){
                /*****/
                alert("success!");
                $('#getResultDiv ul').empty();
                var playerList = "<table border='1'>";
                playerList += "<tr><td>Name</td><td>Surname</td><td>Age</td></tr>";

                $.each(result, function(i, player){
                    playerList +="<tr>";
                    playerList +="<td>"+player.playerName +"</td>";
                    playerList +="<td>"+player.playerSurname+"</td>";
                    playerList +="<td>"+player.playerAge+"</td>";
                    playerList +="</tr>";
                });
                playerList +="</table>";
                $('#getResultDiv').append(playerList)
                console.log("Success: ", result);
        },
            error : function(e) {
                $("#getResultDiv").html("<strong>Error</strong>");
                console.log("ERROR: ", e);
            }
        }); 
    }
})

HTML部分

 <!-- *** Players *** --> 

    <h3 style="color: darkolivegreen" ><strong>Player System</strong></h3>
  <div class="col-sm-7" style="margin:20px 0px 20px 0px">
      <button id="getAllPlayers">Get all players</button>
      <div id="getResultDiv" style="padding:20px 10px 20px 50px">
            <ul class="list-group">
          </ul>
        </div>
    </div>


 <!-- *** --> 

我不知道我哪里做错了。

Answer 1

为 CORS 问题添加过滤器类，如下

import javax.servlet.http.HttpServletResponse;
import javax.servlet.Filter;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {


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, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

chain.doFilter(req, res);
}

@Override
public void init(FilterConfig filterConfig) {
}

@Override
public void destroy() {
}

}