意外標記 '&lt;', "<div id="text_translate"><p> 我是 Reactjs 的初學者和 StackOverflow 的新手。 實際上，我正在嘗試將數據從后端傳遞到前端。 但不是從后端 url 獲取 JSON 數據，而是從前端的 index.html 獲取數據。 我的后端是nodejs。 基本上，我想從后端獲取 JSON 數據並將數據發布到前端的控制台中。 但我得到這個SyntaxError: Unexpected token '&lt;', "&lt;.DOCTYPE "... is not valid JSON誰能幫我解決這個問題。 <a href="/questions/tagged/reactjs" class="post-tag" title="顯示標記為“reactjs”的問題" aria-label="show questions tagged 'reactjs'" rel="nofollow noreferrer" aria-labelledby="reactjs-container">reactjs</a> <a href="/questions/tagged/nodejs" class="post-tag" title="顯示標記為“nodejs”的問題" aria-label="show questions tagged 'nodejs'" rel="nofollow noreferrer" aria-labelledby="nodejs-container">nodejs</a></p><p> <strong>前端代碼</strong></p><pre>App.js import React from 'react'; import {useState, useEffect} from 'react'; import {getOrder} from './ApiCalls.js' function App() { const[values, setValues]=useState({ amount:0, orderId:'' }) const{amount, orderId}=values useEffect(() =&gt; { createorder() }, []) const createorder=()=&gt;{ getOrder().then(response=&gt;console.log(response)) } const showRazorPay=()=&gt;{ const form=document.createElement('form') form.setAttribute('action',`${process.env.REACT_APP_BACKEND}/payment/callback`); form.setAttribute('method',"POST"); const script=document.createElement("script"); script.src= "https://checkout.razorpay.com/v1/checkout.js"; script.setAttribute("data-key",process.env.REACT_APP_DATA_KEY); script.setAttribute("data-amount", amount); script.setAttribute("data-prefill.contact","9561315545"); script.setAttribute("data-order_id", orderId); script.setAttribute("data-prefill.name", "Priyanka Chaudhari"); script.setAttribute("data-image", `${process.env.REACT_APP_BACKEND}/logo`) script.setAttribute("data-buttontext","Donate Now;"). document.body;appendChild(form). form;appendChild(script). const input= document;createElement("input"). input;type="hidden". input;custom="Hidden Element"; } return ( &lt;div&gt; &lt;/div&gt; ); } export default App;</pre><pre> ApiCalls.js export const getOrder=()=&gt;{ return fetch(`${process.env.REACT_APP_BACKEND}/createorder`,{ method: "GET", headers: { 'Content-Type':'application/json' } }).then(response=&gt;response.json()).catch((err)=&gt;console.log(err)) }</pre><p> <strong>后端代碼</strong></p><pre>App.js const express=require('express') const bodyParser=require('body-parser') const cors=require('cors') const app=express() const PaymentRoute=require('./PaymentRoute') app.use(bodyParser.json()) app.use(cors()) app.use('/api',PaymentRoute); app.listen(5000,()=&gt;{ console.log(`App is running at 5000 port`) })</pre><pre> PaymentRoute.js const express=require('express') const router=express.Router() const{CreateOrder,paymentCallback,getLogo}=require('./PaymentController') router.get('/createorder',CreateOrder); router.post('/payment/callback',paymentCallback) router.get('/logo',getLogo) module.exports=router;</pre><pre> PaymentController.js require('dotenv').config() const Razorpay=require('razorpay') const uniqueId=require('uniqid') const path=require('path') var instance = new Razorpay({ key_id: process.env.KEY_ID, key_secret: process.env.SECRET_KEY }) // instance.payments.fetch(paymentId) exports.CreateOrder=(req,res)=&gt;{ var options = { amount: 50000, // amount in the smallest currency unit currency: "INR", receipt: uniqueId() }; instance.orders.create(options, function(err, order) { if(err){ return res.status(500).json({ error:err }) } res.json(order) }); } exports.paymentCallback=(req,res)=&gt;{ } exports.getLogo=(req,res)=&gt;{ res.sendFile(path.join(__dirname,'donate-image.png')) }</pre></div>

Question

我是 Reactjs 的初學者和 StackOverflow 的新手。 實際上，我正在嘗試將數據從后端傳遞到前端。 但不是從后端 url 獲取 JSON 數據，而是從前端的 index.html 獲取數據。 我的后端是nodejs。 基本上，我想從后端獲取 JSON 數據並將數據發布到前端的控制台中。 但我得到這個SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON誰能幫我解決這個問題。 reactjs nodejs

前端代碼

App.js
import React from 'react';
import {useState, useEffect} from 'react';
import {getOrder} from './ApiCalls.js'

function App() {

  const[values, setValues]=useState({
    amount:0,
    orderId:''
  })
  const{amount, orderId}=values

  useEffect(() => {
    createorder()
  }, [])
  
  
  const createorder=()=>{
    getOrder().then(response=>console.log(response))
  }

  const showRazorPay=()=>{
    const form=document.createElement('form')
    form.setAttribute('action',`${process.env.REACT_APP_BACKEND}/payment/callback`);
    form.setAttribute('method',"POST");
    const script=document.createElement("script");
    script.src= "https://checkout.razorpay.com/v1/checkout.js";
    script.setAttribute("data-key",process.env.REACT_APP_DATA_KEY);
    script.setAttribute("data-amount", amount);
    script.setAttribute("data-prefill.contact","9561315545");
    script.setAttribute("data-order_id", orderId);
    script.setAttribute("data-prefill.name", "Priyanka Chaudhari");
    script.setAttribute("data-image", `${process.env.REACT_APP_BACKEND}/logo`)
    script.setAttribute("data-buttontext","Donate Now!");
    document.body.appendChild(form);
    form.appendChild(script);
    const input= document.createElement("input");
    input.type="hidden";
    input.custom="Hidden Element";
  }
  return (
    <div>

    </div>
    
  );
}

export default App;

ApiCalls.js
export const getOrder=()=>{
    return fetch(`${process.env.REACT_APP_BACKEND}/createorder`,{
        method: "GET",
        headers: {
            'Content-Type':'application/json'
        }
    }).then(response=>response.json())
    .catch((err)=>console.log(err))
}

后端代碼

App.js
const express=require('express')
const bodyParser=require('body-parser')
const cors=require('cors')
const app=express()
const PaymentRoute=require('./PaymentRoute')

app.use(bodyParser.json())
app.use(cors())

app.use('/api',PaymentRoute);


app.listen(5000,()=>{
    console.log(`App is running at 5000 port`)
})

PaymentRoute.js
const express=require('express')
const router=express.Router()
const{CreateOrder,paymentCallback,getLogo}=require('./PaymentController')

router.get('/createorder',CreateOrder);
router.post('/payment/callback',paymentCallback)
router.get('/logo',getLogo)
module.exports=router;

PaymentController.js
require('dotenv').config()
const Razorpay=require('razorpay')
const uniqueId=require('uniqid')
const path=require('path')


var instance = new Razorpay({ key_id: process.env.KEY_ID, key_secret: process.env.SECRET_KEY })

// instance.payments.fetch(paymentId)
exports.CreateOrder=(req,res)=>{
    var options = {
        amount: 50000,  // amount in the smallest currency unit
        currency: "INR",
        receipt: uniqueId()
      };
      instance.orders.create(options, function(err, order) {
        if(err){
        return    res.status(500).json({
                error:err
            })
        }
        res.json(order)
      });
}
exports.paymentCallback=(req,res)=>{

}
exports.getLogo=(req,res)=>{
  res.sendFile(path.join(__dirname,'donate-image.png'))
}

Answer 1

我將createorder function 名稱更改為createOrder ，就像在process.env.REACT_APP_BACKEND/createorder中一樣， /createorder已經存在於我的路徑名中，所以我認為這是導致此錯誤的原因