Laravel集成Stripe本地正常 FTP部署子路径后fetch请求失效

核心是三个配置错误叠加导致请求失败，本地根目录部署不会触发这些问题，子路径部署时直接暴露：

1. 后端路由没有加/app前缀，和前端硬编码的请求路径不匹配
2. Blade模板里表单action写的是相对路径，不同页面层级下会拼接出错误地址
3. JS里硬编码了/app路径前缀，后续调整部署规则时极易出现匹配错误，且按钮在form标签内未阻止默认提交行为，会打断fetch请求流程

• 修正路由配置
  给需要走/app前缀的路由统一套前缀组，同时给路由命名，不要手写路径拼接：

  // routes/web.php
  Route::prefix('app')->group(function () {
      Route::post('/checkout/subscription/{subscription}', [StripeController::class, 'checkoutSubscription'])
          ->name('stripe.checkout.subscription');
      // 其他归属/app路径下的业务路由统一放到该组内
  });
  

• 修正Blade模板配置
  1. 把表单的硬编码相对路径action换成Laravel路由函数生成的绝对地址
  2. 给 checkout 按钮新增data-action属性，直接存后端生成的完整请求地址，避免JS里硬拼路径

  {{-- 替换原来的form标签 --}}
  <form method="post" action="{{ route('stripe.checkout.subscription', ['subscription' => $subscription->id]) }}">
      @csrf
      <button 
          id="checkout-button" 
          data-id="{{ $subscription->id }}" 
          data-type="subscription"
          data-action="{{ route('stripe.checkout.subscription', ['subscription' => $subscription->id]) }}"
          class="text-base w-11/12 text-white uppercase bg-fGreen border-none text-xs tracking-wide py-2 px-3 rounded-3xl mb-8 max-w-sm block m-auto text-center"
      >
          gebruiken
      </button>
  </form>
  

• 修正前端JS逻辑
  去掉硬编码的路径、删掉无用的自定义url请求头，加默认提交阻止逻辑和HTTP错误捕获：

  const stripe = Stripe('pk_test_51K1WOQDm7AvXHILKuryQBYtRpecxjXB7GtWrX5fjGRQ2Gq3tlZLfIPrczJ1jazwfARsroGWmBsHceD2L3NS4tAgJ00U2p9jM5V');
  let checkoutButton = document.getElementById('checkout-button');
  
  checkoutButton.addEventListener('click', function(e) {
      // 阻止表单默认同步提交，避免打断fetch请求
      e.preventDefault();
      fetch(checkoutButton.dataset.action, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              "X-CSRF-Token": document.querySelector('input[name=_token]').value
          },
      })
      .then(function(response) {
          // 捕获4xx/5xx错误，避免后端报错时前端无感知
          if (!response.ok) {
              throw new Error(`请求失败，状态码：${response.status}`);
          }
          return response.json();
      })
      .then(function(session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
      })
      .then(function(result) {
          if (result.error) {
              alert(result.error.message);
          }
      })
      .catch(function(error) {
          console.error('Error:', error);
      });
  });
  

• 修正线上环境配置
  1. 打开线上.env文件，把APP_URL值改为https://[domain].be/app
  2. 打开app/Http/Middleware/TrustProxies.php，将$proxies属性设置为*，避免HTTPS和路径生成错误：

     protected $proxies = '*';
     

  3. 线上执行清理缓存命令：

     php artisan route:clear
     php artisan config:clear
     php artisan view:clear
     

打开浏览器F12开发者工具切到网络面板，点击支付按钮后查看fetch请求地址，应当为https://[domain].be/app/checkout/subscription/[对应订阅ID]，返回状态码200即为配置正常。

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