AMP和Paypal Form CORS问题

时间：2020-05-21 作者：Aliiiiiiii

我在AMP页面上使用Paypal“buy now”按钮时遇到问题（它在非AMP页面上工作）

我正在使用此按钮（贝宝网站的代码）：

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="charset" type="hidden" value="UTF-8"> <input name="cmd" type="hidden" value="_xclick">
<input name="business" type="hidden" value="email">
<input name="undefined_quantity" type="hidden" value="1">
<input name="item_name" type="hidden" value="text">
<input name="amount" type="hidden" value="30.00">
<input name="shipping" type="hidden" value="0.00">
<input name="shipping2" type="hidden" value="0.00">
<input name="currency_code" type="hidden" value="EUR">
<input name="lc" type="hidden" value="FR">
<button type="submit" name="submit" class="no-padding">
<img src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif">
</button>
<img src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" alt="text" width="1" height="1">
</form>
错误是：

Access to fetch at \'https://www.paypal.com/cgi-bin/webscr?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fwebsiteurl\' from origin \'https://websiteurl\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource. If an opaque response serves your needs, set the request\'s mode to \'no-cors\' to fetch the resource with CORS disabled.
www.paypal.com/cgi-bin/webscr?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fwebsiteurl:1 Failed to load resource: net::ERR_FAILED
log.js:258 [amp-form] Form submission failed: Error: XHR Failed fetching (https://www.paypal.com/...): Failed to fetch​​​
    at bb (https://cdn.ampproject.org/v0.js:29:169)
    at Ya.f.createExpectedError (https://cdn.ampproject.org/v0.js:24:235)
    at https://cdn.ampproject.org/v0.js:142:154
我已经查看了有关核心问题的amp文档here 我已经理解了主要问题，但我无法解决它，我已尝试将此添加到我的。htaccess但存在相同问题：

Header set Access-Control-Allow-Origin \'https://cdn.ampproject.org​\'
Header set AMP-Access-Control-Allow-Source-Origin \'https://your-domain.com\'

1 个回复
SO网友:Weston Ruter

具有的现有表单post 方法在适应AMP时可能会出现问题，尤其是当它们指向外部域时。有两个问题：

在AMP中使用post 操作将请求在表单中显示JSON数据，而不会导致页面导航。当需要页面导航时，服务器应该发送AMP-Redirect-To 响应标题。当然，这对贝宝没有帮助Access-Control-Allow-Origin).我正在为WordPress开发官方AMP插件，我们有一个issue 通过引入local form proxy.

不过，您可以尝试两种解决方法。

切换到get 方法打开form

虽然这并不适用于所有情况，但有时表单提交处理程序会接受GET 请求与POST. 以下是放大器中的显示方式：

<form action="https://www.paypal.com/cgi-bin/webscr" method="get" target="_top">
    <input name="charset" type="hidden" value="UTF-8">
    <input name="cmd" type="hidden" value="_xclick">
    <input name="business" type="hidden" value="email">
    <input name="undefined_quantity" type="hidden" value="1">
    <input name="item_name" type="hidden" value="text">
    <input name="amount" type="hidden" value="30.00">
    <input name="shipping" type="hidden" value="0.00">
    <input name="shipping2" type="hidden" value="0.00">
    <input name="currency_code" type="hidden" value="EUR">
    <input name="lc" type="hidden" value="FR">
    <input type="hidden" name="submit">
    <button type="submit" class="no-padding">
        <amp-img src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif" width="93" height="26" alt="Acheter"></amp-img>
    </button>
    <amp-pixel src="https://www.paypal.com/fr_FR/i/scr/pixel.gif"></amp-pixel>
</form>
使用amp-iframe如果使用get 方法不起作用，那么您可以使用的另一种解决方法是包装form 在amp-iframe:

<amp-iframe width="93" height="26" sandbox="allow-forms allow-top-navigation" srcdoc=\'
    <style>
        html,body { margin:0; padding: 0; }
    </style>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input name="charset" type="hidden" value="UTF-8">
        <input name="cmd" type="hidden" value="_xclick">
        <input name="business" type="hidden" value="email">
        <input name="undefined_quantity" type="hidden" value="1">
        <input name="item_name" type="hidden" value="text">
        <input name="amount" type="hidden" value="30.00">
        <input name="shipping" type="hidden" value="0.00">
        <input name="shipping2" type="hidden" value="0.00">
        <input name="currency_code" type="hidden" value="EUR">
        <input name="lc" type="hidden" value="FR">
        <input type="image" name="submit" src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif">
        <img src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" alt="text" width="1" height="1">
    </form>
\'>
    <span placeholder>Loading…</span>
</amp-iframe>
请告诉我这两种方法是否适合您。

标签： forms   mobile   小码农  

相关推荐

Change menu for mobile

我正在WordPress网站上工作，我试图根据设备显示不同的菜单（桌面与移动）。为了做到这一点，我在标题中添加了一些代码。php文件：<?php if(wp_is_mobile()){ wp_nav_menu( array( \'menu\' => \'secon