Question

我正在尝试联系barclays付款API，我可以发送一个帖子请求，返回我要将用户重定向到使用邮递员的页面。

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

XMLHttpRequest无法加载https://test.barclaycardsmartpay.com/hpp/pay.shtml。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:4200”访问。

我觉得错误信息是一个诱饵，因为如果cors是问题，那么我不确定它为什么会在邮递员工作。也许这是因为我试图达到的API是接受SOAP请求，我试图从localhost这样做，这是无法从该API到达（提供双向连接？）。

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

  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: "sam@gmail.com",
    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: "sam@gmail.com",
    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。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:4200”访问。

例外仅表示交叉URL请求无法共享数据。但是您可以调用GET方法，因为它不需要将数据从客户端发送到服务器。但是在POST的情况下，我们需要将数据从客户端发送到服务器，并且浏览器限制由于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>

GLOBAL文件

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

无法发送角度为2的帖子，这是在邮递员工作

2 个答案: