我們用極簡的方式來建立服務，沒有任何附加功能

1 新建一個server資料夾

2 使用npm init 或者yarn init 一路enter

3 yarn add express cors （express 封裝了http等外掛的框架， cors解決跨域）

4 在server 內新建 server.js

var express = require('express')

var cors = require('cors');

var app = express();

app.use(cors())

app.post('/api/test', (req, res) => {

    res.json({
 

        code: 0,

        message: '成功',

        content: '介面呼叫成功',

    })

})

app.listen(4000, () => {

    console.log('正在監聽4000埠');

})

啟動 node server

看到dos 視窗如下表明介面服務啟動了，

如果你有介面呼叫工具例如：postman，可以直接呼叫試試或者介面改用get直接在瀏覽器訪問

得到返回值，證明介面沒問題

建立web ，這裡使用最常用的腳手架 create-react-app

npx create-react-appcreate_react_app

開啟 App.js 我們使用原生的fetch 呼叫介面， 執行檢視控制檯 network

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

  const testApi = () => {

      fetch('http://localhost:4000/api/test', { method: 'POST' })

        .then((res) => {

           return res.json()

        })

        .then((data) => {
 

          console.log(data);

        })

  }

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

        <button onClick={testApi}>測試介面</button>

      </header>

    </div>

  );

}

export default App;

本地呼叫成功，下面來把node和web部署到伺服器

小白從零開始阿里雲部署react專案+node服務介面（一：阿里雲伺服器）

小白從零開始阿里雲部署react專案+node服務介面（三：部署到伺服器）