nginx负载均衡配置

后端

demo1

TestController.java

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.InetAddress;
import java.net.UnknownHostException;

@RestController
public class TestController {

    @GetMapping("/getIp")
    public String getIp() throws UnknownHostException {
        InetAddress localHost = InetAddress.getLocalHost();
        return localHost.getHostAddress()+":91";
    }
}

application.properties

spring.application.name=demo1
server.port=91

demo2

TestController.java

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.InetAddress;
import java.net.UnknownHostException;

@RestController
public class TestController {

    @GetMapping("/getIp")
    public String getIp() throws UnknownHostException {
        InetAddress localHost = InetAddress.getLocalHost();
        return localHost.getHostAddress() + ":92";
    }
}

application.properties

spring.application.name=demo
server.port=92

nginx

upstream backend {   
    server localhost:91;
	server localhost:92;
}
server {
	listen       90;
	server_name  localhost;
	charset utf-8;
	
	location / {
		proxy_pass http://backend;
	}
}

测试

http://localhost:90/getIp

前端

test.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">
      Fetched Data: {{ data }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:91/getIp')
          .then(response => {
            this.data = response.data;
          })
          .catch(error => {
            console.error('There was an error!', error);
          });
    },
  },
};
</script>

后端跨域处理

package com.example.demo;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.InetAddress;
import java.net.UnknownHostException;

@RestController
public class TestController {

    @GetMapping("/getIp")
    @CrossOrigin(origins = "http://localhost:3000")
    public String getIp() throws UnknownHostException {
        InetAddress localHost = InetAddress.getLocalHost();
        return localHost.getHostAddress()+":91";
    }
}

代理配置

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3000,
    host: true,
    open: true,
    proxy: {
      // https://cn.vitejs.dev/config/#server-proxy
      '/dev-api': {
        target: 'http://localhost:90',
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/dev-api/, '')
      },
    }
  }
})

.env.development

VITE_APP_BASE_API = '/dev-api'

.env.production

VITE_APP_BASE_API = '/prod-api'

request.js

// /api/htt.js
import axios from 'axios'

const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,// 你的API基础URL
    timeout: 5000, // 请求超时时间
    // 其他axios配置...
    withCredentials: true // 跨域请求时是否需要使用凭证
})

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data; // 假设API直接返回数据而不是response对象
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 封装GET请求
export function get(url, params = {}) {
    return service.get(url, {params})
        .then(response => {
            // 可以在这里对响应数据进行统一处理，‌但在这个例子中我们直接返回
            return response.data;
        })
        .catch(error => {
            // 处理请求错误，‌这里可以根据需要调整
            console.error('GET请求失败：‌', error);
            return Promise.reject(error);
        });
}

// 封装POST请求
export function post(url, data = {}) {
    return service.post(url, data)
        .then(response => {
            // 可以在这里对响应数据进行统一处理，‌但在这个例子中我们直接返回
            return response.data;
        })
        .catch(error => {
            // 处理请求错误，‌这里可以根据需要调整
            console.error('POST请求失败：‌', error);
            return Promise.reject(error);
        });
}

//封装后端接口
export function test() {
    return service.get('/getIp').then(response => {
        console.log("返回成功的值", response)
        return response;
    }).catch(error => {
        return Promise.reject(error);
    });
}

test.vue

<template>
  <div>
    <button @click="fetchData">获取</button>
    <div v-if="data">
      请求地址为: {{ data }}
    </div>
  </div>
</template>

<script>
import {test} from "@/request.js";

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      test().then(result => {
        this.data = result
      });
    },
  },
};
</script>