CORS Angular 和 SpringBoot - 请求被阻止答案

【问题标题】：CORS Angular and SpringBoot - request blockedCORS Angular 和 SpringBoot - 请求被阻止
【发布时间】：2018-09-12 05:17:33
【问题描述】：

我有一个问题，我似乎没有弄清楚。我想从我的

发送一个 http 请求

Angular 客户端：

const url = 'http://localhost:8080/api';
console.log(this.http.get(url).subscribe(data => this.greeting = data));

到我使用 CORS 注释的 SpringBoot 后端：

@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
    @RequestMapping("/api/")
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }

但我收到一个错误，它被阻止并一直重定向我登录。

Failed to load http://localhost:8080/api: Redirect from 'http://localhost:8080/api' to 'http://localhost:8080/login' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

有办法改变吗？

感谢您对此的任何提示或帮助。我想了解为什么会出现这个问题。

【问题讨论】：

您是否尝试将 CORS 添加到 /login？

标签： spring angular spring-boot

【解决方案1】：

这是您的服务器端的问题。你所要做的就是在你的服务器端做一个组件，它会解决这个问题。或参考here

遵循此代码：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class RequestFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
            try {
                chain.doFilter(req, res);
            } catch(Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("Pre-flight");
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "authorization, content-type," +
                    "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with");
            response.setStatus(HttpServletResponse.SC_OK);
        }

    }
    }

【讨论】：

【解决方案2】：

您可以在web.xml 中使用filter，而不是使用@Crossorigin 注释每个方法，如下所述

将下方过滤器添加到web.xml 文件。

 <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

下面给出了上述 jar 的依赖关系。

<dependency>
            <groupId>com.thetransactioncompany</groupId>
            <artifactId>cors-filter</artifactId>
            <version>2.5</version>
        </dependency>

就是这样 - 完成。

【讨论】：

【解决方案3】：

您的RequestMapping 中有错误，因为您使用了@RequestMapping("/api/")，这将被评估为http://your_url/api//。您的控制器中不存在此类映射，因此它会给您 CORS Origin 错误。

只需从@RequestMapping("/api/") 中删除尾随/，使其成为@RequestMapping("/api")。

你的类应该如下所示，

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class DemoController {

    @RequestMapping(value = "/api", method = RequestMethod.GET)
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }
}

【讨论】：

【解决方案4】：

当您选择注释您的应用程序时，您必须为每个方法单独提供@CrossOrigin 注释。这意味着您还必须这样做：

@CrossOrigin(origins = "http://localhost:4200/", maxAge = 3600)
    @RequestMapping("/login/")
    public Map<String,Object> login() {
     /* ... */
    }

参考：https://spring.io/guides/gs/rest-service-cors/#_enabling_cors

【讨论】：