javascript - CSRF错误发生在Angular2中，但在Postman中一切正常(SOAP XML Ajax)

Question

Postman 中的 SOAP XML Ajax 调用:

请求:

    Method: Post
    Url: https://domain.com/path
    Content-Type: text/xml
    Body:
    <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:cus="http://domain.com/">
        <soapenv:Header/>
        <soapenv:Body>
            body message
        </soapenv:Body>
    </soapenv:Envelope>

回应:

    <?xml version='1.0' encoding='UTF-8'?>
    <S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
    <SOAP-ENV:Header/>
    <S:Body>
     data returned
    </S:Body>

这是 Angular2 中的代码:

    //ServiceData as provider 

    import ****; //abbreviation

    export class ServiceData { 
      private url = Setting.API_BASE_DATA;
      private headers = new Headers({'Content-Type': 'text/xml;charset=utf-8',
                                     'Accept': 'text/xml'});

      constructor(
        private http: Http,
      ) { }
      getStatus(customerNumber: number): Observable<any> {

        let data = `<soapenv:Envelope ...>......abbreviation......
                    </soapenv:Envelope>`; // the data are the same as the previous one.

        return this.http.post(`${this.url}`, data, {headers: this.headers})
                   .map(response => {return response;})
                   .catch(err => {return Observable.throw(err);});
      }
    }

    // Component

    constructor(
       private serviceData: ServiceData,
    ) {}

    ngOnInit(): void{
        this.serviceData.getStatus(384914)
            .subscribe( response => console.log(response),
                        err => console.log(err) );
    }

部署后出现错误:

XMLHttpRequest 无法加载 https://billingws.utilibill.com.au/tiabwsv2/UtbCustomer?wsdl。 Access-Control-Allow-Origin 不允许源域。

使用原生 javascript Ajax 时也出现此错误，均发生在我的本地开发环境和在线服务器环境中。

我猜我的代码一定有问题。

有什么技巧吗？

提前致谢。

Answer 1

这是由于CORS (Cross-Origin Resource Sharing) header 不允许您请求该域。

选项1 如果您控制有问题的域，则可以添加 CORS header 以允许调用。我可以看到服务器使用 apache，因此您可以在 .htaccess 中设置

Header set Access-Control-Allow-Origin "*"

选项2如果您不控制域，则需要使用反向代理，以便您可以通过您自己的域对该域进行ajax调用。