java - 从 ReactJS 访问 REST 服务时出现 CORS 问题

Question

我在控制台上看到的错误是

对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:3000 ' 因此不允许访问。响应的 HTTP 状态代码为 401。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我的 Web 应用程序正在 localhost:3000 上运行 我的服务器运行在 localhost:8081 我可以使用 postman 访问服务。

这是我已经尝试过的事情:-

在 REST API 一侧，我添加了 CORS 过滤器类:-

public class CORSFilter implements Filter {
public static final String ACCESS_CONTROL_ALLOW_ORIGIN_NAME = "Access-
Control-Allow-Origin";
public static final String DEFAULT_ACCESS_CONTROL_ALLOW_ORIGIN_VALUE = "*";

public static final String ACCESS_CONTROL_ALLOW_METHDOS_NAME = "Access-
Control-Allow-Methods";
public static final String DEFAULT_ACCESS_CONTROL_ALLOW_METHDOS_VALUE = "*";

public static final String ACCESS_CONTROL_MAX_AGE_NAME = "Access-Control-Max-
Age";
public static final String DEFAULT_ACCESS_CONTROL_MAX_AGE_VALUE = "3600";

public static final String ACCESS_CONTROL_ALLOW_HEADERS_NAME = "Access-
Control-Allow-Headers";
public static final String DEFAULT_ACCESS_CONTROL_ALLOW_HEADERS_VALUE = "*";

private String accessControlAllowOrigin = 
DEFAULT_ACCESS_CONTROL_ALLOW_ORIGIN_VALUE;
private String accessControlAllowMethods = 
DEFAULT_ACCESS_CONTROL_ALLOW_METHDOS_VALUE;
private String accessControlAllowMaxAge = 
DEFAULT_ACCESS_CONTROL_MAX_AGE_VALUE;
private String accessControlAllowHeaders = D 
DEFAULT_ACCESS_CONTROL_ALLOW_HEADERS_VALUE;


 private Map<String,String> initConfig(){
    Map<String, String> result = new HashMap<String,String>();

    result.put(ACCESS_CONTROL_ALLOW_ORIGIN_NAME,"accessControlAllowOrigin");

result.put(ACCESS_CONTROL_ALLOW_METHDOS_NAME,"accessControlAllowMethods");
    result.put(ACCESS_CONTROL_MAX_AGE_NAME,"accessControlAllowMaxAge");

result.put(ACCESS_CONTROL_ALLOW_HEADERS_NAME,"accessControlAllowHeaders");

    return result;
}

@Override
public void init(FilterConfig filterConfig) throws ServletException {
    String initParameterValue;
    Map<String, String> stringStringMap = initConfig();

    for (Map.Entry<String, String> stringStringEntry : 
stringStringMap.entrySet()) {
        initParameterValue = 
filterConfig.getInitParameter(stringStringEntry.getKey());


        if(initParameterValue!=null){
            try {
                getClass().getDeclaredField(stringStringEntry.getValue()).set(this, initParameterValue);
            } catch(Exception ex) { }
        }
    }
}

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse 
servletResponse, FilterChain filterChain) throws IOException, 
ServletException {
    HttpServletResponse response = (HttpServletResponse) servletResponse;

    response.setHeader(ACCESS_CONTROL_ALLOW_ORIGIN_NAME, 
accessControlAllowOrigin);
    response.setHeader(ACCESS_CONTROL_ALLOW_METHDOS_NAME, 
accessControlAllowMethods);
    response.setHeader(ACCESS_CONTROL_MAX_AGE_NAME, 
accessControlAllowMaxAge);
    response.setHeader(ACCESS_CONTROL_ALLOW_HEADERS_NAME, 
accessControlAllowHeaders);

    filterChain.doFilter(servletRequest, servletResponse);
}

@Override
public void destroy() {
}

}

我的 web.xml 看起来像这样:-

<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">

<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-
class>com.barclaycardus.svc.agentprofile.config.CORSFilter</filter-class>
</filter>


<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

在 react 应用程序中，我添加了以下 header :-

 headers1.append('Access-Control-Allow-Origin', '*');
 headers1.append('Access-Control-Allow-Credentials', 'true');

我仍然遇到同样的问题。

var request = new Request(url, {
method: 'GET',
headers:headers1,
cache:'no-cache'
// mode:'no-cors'
});

当我在 fetch API 调用中使用 no-cors 模式时，我收到 401 错误，我猜 no-cors 模式没有发送很少的 header 。

我尝试的其他选择是使用 @CrossOrigin ，但由于我使用旧版本的 spring ，我不支持 @CrossOrigin ，我无法升级我的 spring 版本，因为其他旧代码在升级时中断。

Answer 1

您似乎误解了这里的某些内容。

CORS 的 header 应该从服务器返回，而不是从客户端发送( react )。

Access-Control-Allow-Origin
Access-Control-Allow-Credentials

示例: 您想要从 A -> 服务器 B 发送请求。

浏览器会先发送HTTP OPTIONS，来验证该方法是否允许，如果不允许则不会发送请求。

浏览器如何验证它，它基于服务器B对HTTP OPTIONS请求返回的 header 。

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: *