条带意外标记 < 在 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建议检查网络选项卡。