无法在邮递员工作的Angular 2中发送帖子

Question

我正在尝试联系巴克莱付款API，我可以发送一个邮政请求，该请求返回我想重定向用户使用Postman的页面。

但是，从Angular 2应用程序发送相同的请求，返回：

xmlhttprequest无法加载https://test.barclaycardsmartpay.com/hpp/pay.shtml。请求的资源上没有"访问控制"标头。源'http：//localhost：4200'不允许访问。

我觉得错误消息是诱饵，因为如果CORS是问题，那么我不确定为什么它在Postman中起作用。也许是因为我试图达到的API是接受肥皂请求，而我正在尝试从Localhost那里进行此操作，而Localhost无法从该API到达(提供两种方式连接？(。

在我的Angular应用中，我的帖子看起来像这样：

  let paymentPost : iSmartPayment = {
    merchantSig: "23XJ9auO4brdZMzPXoe+Lml4H5PfQERgrImns6s4FdQ=",
    merchantReference: "abc",
    paymentAmount: "1",
    currencyCode: "GBP",
    shipBeforeDate: "2018-01-01",
    skinCode: "neXEF4Y2",
    merchantAccount: "GroupEdTest",       
    sessionValidity: "2018-01-01T00:00:00Z",
    merchantReturnData: "http://www.mywebsiteUrl.com.s3-website.eu-west-2.amazonaws.com/#/transactionhistory",
    shopperEmail: "[e-mail]",
    shopperReference: "Sam"
  }
return this.http.post('https://test.barclaycardsmartpay.com/hpp/pay.shtml', JSON.stringify(paymentPost)).map((response: Response) => {
      console.log('TODO: process response', response);
      return response.json();
    }).catch(this.handleError);

请注意，我已经更改了帖子中的一些值，以使数据机密。

有什么想法在这里我的问题是什么？

Answer 1

发布之前您不需要JSON.stringify。

let url: string = 'https://test.barclaycardsmartpay.com/hpp/pay.shtml';
let paymentPost : iSmartPayment = {
    merchantSig: "23XJ9auO4brdZMzPXoe+Lml4H5PfQERgrImns6s4FdQ=",
    merchantReference: "abc",
    paymentAmount: "1",
    currencyCode: "GBP",
    shipBeforeDate: "2018-01-01",
    skinCode: "neXEF4Y2",
    merchantAccount: "GroupEdTest",       
    sessionValidity: "2018-01-01T00:00:00Z",
    merchantReturnData: "http://www.mywebsiteUrl.com.s3-website.eu-west-2.amazonaws.com/#/transactionhistory",
    shopperEmail: "[e-mail]",
    shopperReference: "Sam"
  }
return this.http.post(url, paymentPost).map((response: Response) => response.json()).catch(this.handleError);

如果确实有效，则可能是Angular在失败之前发送的OPTIONS请求。

Answer 2

我遇到了同样的问题，这是你们所有人都需要的。

根据您的问题参考。

xmlhttprequest无法加载https://test.barclaycardsmartpay.com/hpp/pay.shtml。请求的资源上没有"访问控制"标头。源'http：//localhost：4200'不允许访问。

例外仅表示交叉URL请求无法共享数据。但是您可以调用GET方法，因为它不需要将数据从客户端发送到服务器。但是，如果发布帖子，我们需要将数据从客户端发送到服务器，浏览器限制了由于CORS而跨不同域发送的数据。

要解决此问题，这是需要完成的工作，从API端，我们必须在web.config文件中添加配置和global.aspx文件中的设置。

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

全局文件

    protected void Application_BeginRequest()
    {
        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
        {
            Response.Flush();
        }
    }