CORS 在 chrome 中无法与 Angular 2 一起使用

Posted 2023-03-04

【中文标题】CORS 在 chrome 中无法与 Angular 2 一起使用

【英文标题】：CORS not working with Angular 2 in chrome

【发布时间】：2018-01-06 13:15:09

【问题描述】：

我正在使用javascript代码调用部署在weblogic上并使用jaxws在java中开发的soap webservice。从 IE11 我收到来自 SOAP 的响应，但从 chrome 我收到以下错误：

Response to preflight request doesn't pass access control check: 
 No 'Access-Control-Allow-Origin' header is present on the requested resource. 
 Origin 'http://localhost:4200' is therefore not allowed access. 
 The response had HTTP status code 405.

我在 chrome 中添加了 cors 扩展，然后出现以下新错误：

Response for preflight has invalid HTTP status code 405

我还将请求标头设置如下：

xhr.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'X-Custom-Header');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');

但还是没有成功。

下面是我的代码 sn-p 来调用我部署在 weblogic 上的 web 服务

    var soapMessage = this.createSOAPMessage();

    function createCORSRequest(method, url)
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr) 
            xhr.open(method, url, true);
         else 
            xhr = null;
        
        return xhr;
    

    var xhr = createCORSRequest('POST','http://IPAddress:7001/Path/ServiceImplService?WSDL');
    if(!xhr)
    console.log('XHR Issue');
    return;
    

    xhr.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.setRequestHeader('Access-Control-Allow-Headers', 'X-Custom-Header');
    xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');

    xhr.send(soapMessage);

    var result
    xhr.onload = function()
        result = xhr.responseText;
        console.log('===Result====> '+result);
    
    return result;

【问题讨论】：

I also set request headers as below: - 您不发送这些标头，那些 必须 为 CORS 接收 ... CORS 由服务器控制，客户端无法告诉服务器 不管你的设置如何，给我你的资源 :p

所以你的意思是我必须在服务器端处理 cors 请求，而不是来自我们的 javascript？

这是控制 CORS 的地方

【参考方案1】：

在您的服务中创建此类：

@Provider
@PreMatching
public class CorsFilter implements ContainerResponseFilter 

    @Override
    public void filter(ContainerRequestContext requestCtx, ContainerResponseContext responseCtx) throws IOException 

        responseCtx.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        responseCtx.getHeaders().add("Access-Control-Allow-Origin", "*");
        responseCtx.getHeaders().add("Access-Control-Allow-Credentials", "true");
        responseCtx.getHeaders().add("Access-Control-Allow-Methods", "GET, POST");
    

【讨论】：

您可能需要指出 Access-Control-Allow-Headers 还需要 Access-Control-Allow-Origin、Access-Control-Allow-Headers 和 Access-Control-Allow-Methods，除非 OP 从请求中删除那些（无意义的）标头

通过使用这个类我能够解决问题，但这是一个真正的解决方案吗？因为当我无法访问服务时，我该如何管理这个问题？我对这种方法很陌生，所以只是想理解。并感谢您的帮助

这是一个真正的解决方案。