Angular 7应用程序上的交叉原点问题

2024-05-17 • 问答

我正在研究angular 7应用程序，并使用httpClient实现了其余的API调用。 API有时运行良好，有时会出现错误并显示状态403：

access to XMLHttpRequest at 'API URL' from origin 'API server' has been blocked by CORS policy: No 'access-control-allow-origin' header is present on the requested resource.

在每个API停止工作之后，如果其中任何一个API出现此错误。

对于此应用程序，JAVA中的后端服务器doe。在Java中，以下添加的跨源代码允许从前端访问。

    public FilterRegistrationBean<CorsFilter> corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();

        config.setallowedOrigins(Arrays.asList(CorsConfiguration.ALL));
        config.setallowedHeaders(Arrays.asList(CorsConfiguration.ALL));
        config.setallowedMethods(Arrays.asList(CorsConfiguration.ALL));
        config.setMaxAge(3600L);
        config.setallowCredentials(true);

        source.registerCorsConfiguration("/**",config);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return bean;
    }```

Please help me out for this.

我将尝试两种解决方案。

1）您可以在控制器类中使用此注释 @CrossOrigin（origins =“ *”），它将允许所有来自角度应用程序的请求调用。

2）否则，您可以在CMD中使用此命令，它将禁用chrome中的 web-security 标志，并且它将打开chrome的新实例，只需运行您的angular应用程序即可，永远不会出现任何CORS错误。这是出于测试目的。

命令： chrome.exe --disable-web-security --user-data-dir = c：\ my-chrome-data \ data

请尝试使用下面的代码来解决您的问题

import org.springframework.context.annotation.Profile;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest servletRequest,ServletResponse servletResponse,FilterChain filterChain) throws IOException,ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE,PUT,PATCH");
        response.setHeader("Access-Control-Allow-Headers","Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Methods,Access-Control-Request-Headers");
        filterChain.doFilter(servletRequest,servletResponse);
    }

    @Override
    public void destroy() {
    }
}

Angular 7应用程序上的交叉原点问题

mj40778 回答：Angular 7应用程序上的交叉原点问题

大家都在问