Angular2 Ng2文件上传CORS问题 [英] Angular2 Ng2 file Upload CORS issues

问题描述

我是刚尝试 angular2 的人.我已经安装了angular2文件上传.我在此处

I am new to try angular2. I have installed angular2 file upload. I copied all the code from the tutorial right here

我完全复制了开发人员在此处写的内容.但是我遇到这样的问题:

I copy exactly what the developer write there. But I get issues like this:

XMLHttpRequest无法加载 http://localhost:8080/citizen/up .对预检请求的响应未通过访问控制检查:响应中"Access-Control-Allow-Credentials"标头的值为"，当请求的凭据模式为时，必须为"true"'包括'.因此，不允许使用来源" http://localhost:4200 "使用权.发起的请求的凭据模式XMLHttpRequest由withCredentials属性控制.

XMLHttpRequest cannot load http://localhost:8080/citizen/upload. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

我的 SpringBoot

@Component
public class SimpleCorsFilter implements Filter {
     @Override
     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Authorization, Content-Type, Accept, enctype");
        chain.doFilter(req, res);
    }

在我添加angular2文件上传代码之前还是可以的.该如何解决?

It was still ok before I add that angular2 file upload code. How to resolve that?

推荐答案

发生跨源请求时，它首先发送 HTTP选项以检查服务器是否允许跨源请求.如果您使用的是Spring安全性，请检查是否允许 HTTP Option 未经验证.如果有，请添加这样的过滤器

When a cross origin request happens, it first sends a HTTP option to check whether server allows cross origin requests. If you are using Spring security, check whether you are allowing, HTTP Option to go without validation. If it's there add a filter like this

 protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4200");
    httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia, Authorization");
    httpServletResponse.addHeader("access-control-expose-headers", "Authorization");

    if (!"OPTIONS".equals(httpServletRequest.getMethod())) {
        filterChain.doFilter(httpServletRequest, httpServletResponse);
    }
}

这篇关于Angular2 Ng2文件上传CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！