條帶意外標記 < 在 JSON 在 position 0

Question

我收到這個錯誤，它指向 client.js 的第 21 行。它是 fetch(create.php) 的第二個。

第一個響應返回 200。因此，不確定如何修復它。 到目前為止，整個代碼都是從演示說明中提取的。 https://stripe.com/docs/payments/integration-builder

查看瀏覽器控制台信息：

jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
?ver=3.0.0:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.
value @ ?ver=3.0.0:1
Ec @ ?ver=3.0.0:1
Sc @ ?ver=3.0.0:1
(anonymous) @ client.js:3
client.js:18 Response {type: "basic", url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php"__proto__: Response
content-tss.js:1 TSS: content-tss.js loaded:  https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded:  https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
VM353:4 hosted page injected
(index):1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) @ client.js:21
content-tss.js:1 TSS: content-tss.js loaded:  https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded:  https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false

Answer 1

最可能的情況是您的create.php遇到錯誤並返回錯誤頁面 HTML（因此<位於 position 0）。 您需要調試您的create.php以了解它失敗的地方，然后更正它。 檢查您的 Stripe開發者日志，看看 API 請求是否成功。

Answer 2

我在將數據從 php 傳遞到 js 時遇到了類似的問題。 不要立即解析數據，只需執行console.log(this.responseText); 它會告訴你內容。 通常這是您的 php 代碼中的錯誤，它會告訴您錯誤在哪里以及導致錯誤的原因，以便您修復

Answer 3

我遇到過幾次這個錯誤。 您實際上並沒有返回 JSON 作為響應，因此將該響應解析為 JSON 的嘗試失敗了。

如果您正在執行類似result.json()的操作，您可以改為記錄result.text()並查看實際返回的內容。

PHP有抓人出來返回HTML而不是JSON的習慣。

這是一個關於該主題的廣受歡迎的 Stack Overflow 線程：

語法錯誤：JSON 中的意外標記 < position 0

編輯因為審查：

你的錯誤出現在這里

  .then(function(result) {
    return result.json();
  })

因此，如果您想確保這是 JSON，您可以檢查響應內容類型，如下所示。 摘自MDN

fetch("/create-payment-intent", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(purchase)
})
  .then(result => {
     const contentType = result.headers.get('content-type');
     if (!contentType || !contentType.includes('application/json')) {
       // Or do something else with the result to get it into JSON
       throw new TypeError("Oops, we haven't got JSON!");
     }
     return result.json();
  }

Answer 4

原來錯誤是在require './stripe-php/init.php'; 在create.php文件上。

當我用 Wordpress 開發它時，我把它作為require plugin_dir_url(__FILE__). 'stripe-php/init.php'; require plugin_dir_url(__FILE__). 'stripe-php/init.php'; .

概括：

確保require stripe-php/init.php路徑正確，如下：

require './stripe-php/init.php';

感謝@jason建議檢查網絡選項卡。