import axios from 'axios';

const request = axios.create({
    baseURL: 'http://192.168.31.177:8001',
    // 設(shè)置請(qǐng)求頭
    headers: {},
    // 設(shè)置超時(shí)時(shí)間
    timeout: 2000,
});


// 請(qǐng)求攔截器
request.interceptors.request.use(
    config => {
        // 在發(fā)送請(qǐng)求之前做些什么

        return config;
    },
    error => {
        // 對(duì)請(qǐng)求錯(cuò)誤做些什么
        return Promise.reject(error);
    }
);

// 響應(yīng)攔截器
request.interceptors.response.use(
    response => {
        if (response) {
            // 響應(yīng)數(shù)據(jù)為二進(jìn)制流處理(數(shù)據(jù)導(dǎo)出)
            if (response.data.data instanceof Blob) {
                return response
            }

            const {code, msg} = response.data
            if (code === 200) {
                return Promise.resolve(response.data)
            } else {
                return Promise.resolve(response)
            }
        } else {
            return Promise.reject(new Error('系統(tǒng)出錯(cuò)'))
        }
    },

    function (error) {
        // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

        // 比如：根據(jù)響應(yīng)狀態(tài)碼，做不同的響應(yīng)處理
        console.log(error)
        return Promise.reject(error)
    }
)

export default request

axios.get('/api/getNumbers')
        .then(res => {
            ElMessage({
                message: res.msg,
                type: 'success'
            })
        }).catch(err => {
            ElMessage({
                message: err,
                type: 'error'
            })
        })

  "scripts": {
    "dev": "vite --host 192.168.31.177",
    "build": "vite build",
    "preview": "vite preview"
  }

app.get('/api/getNumbers', (req, res) => {
    // 生成兩個(gè)隨機(jī)數(shù)
    const number1 = Math.floor(Math.random() * 100);
    const number2 = Math.floor(Math.random() * 100);
    res.json({
        code: 200,
        msg: '成功！',
        data: {
            "a": number1,
            "b": number2,
        }
    });
});

http {
    server {
        listen 8001;                # Nginx 監(jiān)聽的端口，前端 axios 中配置的 端口
        server_name 192.168.31.177; # 前端 axios 中配置的 IP

        location / {
            try_files $uri $uri/ /index.html; # 支持Vue路由的history模式
        }

        # 代理后端API請(qǐng)求
        location /api {
            proxy_pass http://192.168.31.45:3000;	# 后端項(xiàng)目運(yùn)行的地址

            # 可選：如果后端接口路徑不包含/api，移除前綴
            # rewrite ^/api/(.*) /$1 break;

            # 添加必要的代理頭信息
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

G:\nginx-1.24.0>nginx -t		 # 檢查配置語(yǔ)法
nginx: the configuration file G:\nginx-1.24.0/conf/nginx.conf syntax is ok
nginx: configuration file G:\nginx-1.24.0/conf/nginx.conf test is successful

G:\nginx-1.24.0>start nginx		# 啟動(dòng)nginx

G:\nginx-1.24.0>nginx -s reload # 不停止，重新加載

location /api：匹配所有以 /api 開頭的請(qǐng)求路徑。

proxy_pass：將匹配的請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)器。

proxy_set_header：設(shè)置請(qǐng)求頭，確保后端能獲取客戶端的真實(shí) IP 和協(xié)議信息。

add_header：添加 CORS 響應(yīng)頭，顯式允許跨域（可選，如果代理已解決跨域，可能不需要）。