本地Vue項目請求本地Node.js服務器如何配置

本地Vue項目請求本地Node.js服務器如何配置

在開發過程中，我們經常需要將前端Vue項目與后端Node.js服務器進行聯調。本文將詳細介紹如何在本地環境中配置Vue項目與Node.js服務器之間的請求。

1. 環境準備

首先，確保你已經安裝了以下工具：

• Node.js
• Vue CLI
• 一個代碼編輯器（如VSCode）

2. 創建Vue項目

使用Vue CLI創建一個新的Vue項目：

vue create my-vue-app

按照提示選擇你需要的配置，完成后進入項目目錄：

cd my-vue-app

3. 創建Node.js服務器

在項目根目錄下創建一個新的文件夾server，并在其中初始化一個Node.js項目：

mkdir server
cd server
npm init -y

安裝Express框架：

npm install express

在server目錄下創建一個index.js文件，編寫一個簡單的Express服務器：

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js server!' });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

啟動服務器：

node index.js

此時，Node.js服務器已經在http://localhost:3000上運行。

4. 配置Vue項目請求Node.js服務器

在Vue項目中，通常使用axios來發送HTTP請求。首先安裝axios：

npm install axios

在src/main.js中引入axios并配置全局默認請求地址：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.config.productionTip = false;

axios.defaults.baseURL = 'http://localhost:3000';

new Vue({
  render: h => h(App),
}).$mount('#app');

在src/components/HelloWorld.vue中發送請求：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    axios.get('/api/data')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
};
</script>

5. 解決跨域問題

在開發過程中，Vue項目運行在http://localhost:8080，而Node.js服務器運行在http://localhost:3000，這會導致跨域問題?？梢酝ㄟ^以下兩種方式解決：

5.1 使用Vue CLI的代理配置

在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

5.2 在Node.js服務器中啟用CORS

在server/index.js中啟用CORS：

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js server!' });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

安裝cors包：

npm install cors

6. 運行項目

啟動Vue項目：

npm run serve

此時，Vue項目將在http://localhost:8080上運行，并且可以成功請求Node.js服務器的數據。

7. 總結

通過以上步驟，我們成功配置了本地Vue項目與本地Node.js服務器之間的請求。無論是通過代理還是CORS，都可以解決跨域問題，確保前后端聯調的順利進行。希望本文對你有所幫助！