时间戳

首页 > 解决方案 > 关于我的 spring rest service40 的 jQuery 和 403 错误和 cors 问题

javascript - 关于我的 spring rest service40 的 jQuery 和 403 错误和 cors 问题

问题描述

Spring API 运行平稳。当我尝试通过客户端访问数据时收到此错误消息。即使我添加了 Cors，问题也没有改善。下面我将分享我的rest控制器和ajax方法。

错误：

在此处输入图像描述

这是我的spring rest api url：

http://localhost:8080/getAllPLayers

我也已经在我的控制器中添加了 CrossOrigin 注释

@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>


 <!-- *** -->

我不知道我在哪里做错了。

标签： javascriptjavaspringcors

解决方案

为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() {
}

}

推荐阅读