Shopify App Proxy中AJAX POST请求返回400错误，本地正常部署异常求解

问题描述 #

我正在开发一款.NET Razor Page架构的Shopify应用，核心功能包含向代理应用URL发送AJAX POST请求。该请求在本地环境和ngrok隧道中完全正常，但部署到Shopify后始终返回400 Bad Request错误。我已经在Shopify社区发帖、联系开发者支持、反复查阅官方文档，问题仍未解决。

具体配置 #

• 代理URL路径配置为apps/member
• 前端代码写在Razor视图中，AJAX请求的处理方法位于代码后置文件中

本地正常运行的AJAX代码 #

$.ajax({
    type: 'POST',
    url: '/apps/member?handler=MethodName',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    headers: {
        'RequestVerificationToken': antiForgeryToken,
        'Content-Type': 'application/json'
    },
    dataType: 'json',
    beforeSend: function (jqXHR, settings) {
        console.log('Request URL:', settings.url);
        console.log('Request Type:', settings.type);
    },
    xhrFields: {
        withCredentials: true
    },
    success: function (response) {
        if (response.success) {
            $('#UserFeedbackMessage').text(response.message).css('color', 'green').show();
        } else {
            $('#UserFeedbackMessage').text(response.message).css('color', 'red').show();
        }
    },
    error: function (xhr, status, error) {
        console.error("Error updating collector info:", error);
        console.log("XHR:", xhr);
        console.log("Status:", status);
        console.log("Response Text:", xhr.responseText);
        $('#UserFeedbackMessage').text("An error occurred while updating your profile.").css('color', 'red').show();
    },
    complete: function (jqXHR, status) {
        console.log('Complete Response Headers:', jqXHR.getAllResponseHeaders());
    }
});

表单数据提取代码 #

$('#saveButton').click(function () {
    var formData = {
        CollectorId: $('#CollectorId').val(),
        FirstName: $('#FirstName').val(),
        LastName: $('#LastName').val(),
        EmailAddress: $('#EmailAddress').val(),
        PhoneNumber: $('#PhoneNumber').val(),
        Address1: $('#address1').val(),
        Address2: $('#Address2').val(),
        City: $('#city').val(),
        StateRegionProvince: $('#stateRegionProvince').val(),
        PostalCode: $('#postalCode').val()
    };

已尝试的无效方案 #

• 将AJAX调用迁移到主题应用扩展中，无效
• 改用form标签POST提交（代码如下），同样失败，但该方式一年前在Shopify上有效

<form id="updateCollectorForm" method="post" action="/apps/member-area?handler=UpdateCollectorInfo">

核心疑问 #

1. Shopify代理URL是否现在仅允许AJAX GET请求？
2. 当前从Shopify应用客户端向外部API传输数据的最常用方式是什么？

问题排查与解答 #

400 Bad Request的核心原因 #

Shopify代理应用的POST请求失败，大概率和防伪造令牌验证或请求路径/格式有关，结合.NET Razor Page场景，重点排查以下几点：

1. 防伪造令牌传递有效性
   Razor Page默认启用Anti-Forgery验证，需确认：

   • antiForgeryToken是否从页面的@Html.AntiForgeryToken()或@AntiForgery.GetAndStoreTokens(HttpContext).RequestToken正确获取
   • 部署后withCredentials: true是否能正常携带Cookie到后端（Shopify代理环境下Cookie作用域可能变化）

2. 代理URL路径正确性
   本地环境的相对路径/apps/member...在Shopify代理环境下可能解析错误，需使用绝对路径（比如https://your-shop.myshopify.com/apps/member?handler=MethodName），或通过Razor生成正确路径：@Url.Page("/apps/member", "MethodName")

3. 请求内容格式冲突
   Razor Page的POST Handler若绑定表单模型，更适配application/x-www-form-urlencoded格式而非JSON。可尝试去掉JSON.stringify(formData)，直接传递formData，并移除重复的Content-Type配置（让jQuery自动处理）

核心疑问解答 #

1. 代理URL是否仅允许GET请求？
   否，Shopify代理应用完全支持POST请求，官方文档明确代理路由可处理所有HTTP方法。问题出在请求不符合后端或Shopify代理的验证规则，而非方法被禁止。

2. 客户端向外部API传输数据的常用方式

   • 后端中转：最安全的方式，客户端先POST数据到你的Shopify应用后端（代理路由），再由后端调用外部API。避免在客户端暴露外部API密钥，符合Shopify安全规范。
   • 直接调用（限特定场景）：若外部API支持CORS，且能通过Shopify App Bridge/OAuth验证身份，可直接从客户端调用，但因安全风险较少使用。
   • Webhook：适用于异步数据传输场景，是Shopify推荐的异步交互方式，但不支持实时交互。

修复后的AJAX代码示例 #

$('#saveButton').click(function () {
    var formData = {
        CollectorId: $('#CollectorId').val(),
        FirstName: $('#FirstName').val(),
        LastName: $('#LastName').val(),
        EmailAddress: $('#EmailAddress').val(),
        PhoneNumber: $('#PhoneNumber').val(),
        Address1: $('#address1').val(),
        Address2: $('#Address2').val(),
        City: $('#city').val(),
        StateRegionProvince: $('#stateRegionProvince').val(),
        PostalCode: $('#postalCode').val()
    };

    // 确保正确获取防伪造令牌
    var antiForgeryToken = $('input[name="__RequestVerificationToken"]').val();

    $.ajax({
        type: 'POST',
        // 通过Razor生成正确的代理URL
        url: '@Url.Page("/apps/member", "MethodName")',
        // 直接传递表单数据，无需JSON序列化
        data: formData,
        headers: {
            'RequestVerificationToken': antiForgeryToken
        },
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        success: function (response) {
            if (response.success) {
                $('#UserFeedbackMessage').text(response.message).css('color', 'green').show();
            } else {
                $('#UserFeedbackMessage').text(response.message).css('color', 'red').show();
            }
        },
        error: function (xhr, status, error) {
            console.error("Error updating collector info:", error);
            console.log("XHR:", xhr);
            console.log("Status:", status);
            console.log("Response Text:", xhr.responseText);
            $('#UserFeedbackMessage').text("An error occurred while updating your profile.").css('color', 'red').show();
        }
    });
});

后端Handler示例 #

public async Task<IActionResult> OnPostMethodNameAsync(CollectorModel model)
{
    // 业务处理逻辑
    return new JsonResult(new { success = true, message = "Updated successfully" });
}

// 定义对应模型类
public class CollectorModel
{
    public string CollectorId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    public string PhoneNumber { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string StateRegionProvince { get; set; }
    public string PostalCode { get; set; }
}

内容的提问来源于stack exchange，提问作者AidenDev