Angular2 Ng2文件上传CORS问题

Posted 2023-02-27

【中文标题】Angular2 Ng2文件上传CORS问题

【英文标题】：Angular2 Ng2 file Upload CORS issues

【发布时间】：2017-11-30 02:43:18

【问题描述】：

我是新来尝试angular2。我已经安装了 angular2 文件上传。我从教程中复制了所有代码here

我完全复制了开发人员在那里写的内容。但是我遇到了这样的问题：

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

我在SpringBoot 中有这样的CORS 过滤器

@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 文件上传代码之前仍然可以。如何解决？

【参考方案1】：

当发生跨域请求时，它首先发送HTTP option 来检查服务器是否允许跨域请求。如果您使用的是 Spring 安全性，请检查您是否允许 HTTP Option 不进行验证。如果有，请添加这样的过滤器

 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);
    

【讨论】：

首先我添加您的代码。但它仍然是同样的错误。我只是在我的代码下面添加（在我的问题中）仍然不起作用。我不明白允许凭证的东西

您需要在 websecurity 配置中为 HTTP Option 设置 permit all。你应该得到一个200 OK 用于从你的角度应用程序发送的HTTP Option。

抱歉，我没有密码。但您只需在添加SimpleCorsFilter 之前添加此权限。在添加过滤器之前添加.antMatchers(HttpMethod.OPTIONS).permitAll()。