nginx配置参考(/etc/nginx/sites-available路径下创建配置文件)
bash
server {
listen 80; # 监听80端口
server_name ip; # 你的域名或IP
location / {
root /var/www/test_page/;
index index.html; # 默认文件
try_files $uri $uri/ /index.html; # 单页应用的路由支持
}
# 后端接口代理
location /api/ {
proxy_pass http://127.0.0.1:8080; # 注意8080后不要加斜杠/
proxy_http_version 1.1;
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;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
return 204;
}
}
}
特别注意:proxy_pass的url后边 带"/"会把 /system 给替换掉,也就是实际会直接访问http://127.0.0.1:8080/后的接口,而不是http://127.0.0.1:8080/system后的接口
golang后端代码示例
bash
package main
import (
"encoding/json"
"log"
"net/http"
)
type Response struct {
Message string `json:"message"`
}
func main() {
// 创建一个路由处理器
router := http.NewServeMux()
router.HandleFunc("/api/hello", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
response := Response{Message: "Hello from Golang backend!"}
json.NewEncoder(w).Encode(response)
})
// 直接使用路由处理器启动服务器
log.Println("Starting server on :8080")
if err := http.ListenAndServe(":8080", router); err != nil {
log.Fatalf("Failed to start server: %v", err)
}
}
前端代码示例
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend Demo</title>
</head>
<body>
<h1>Frontend Demo</h1>
<button id="fetchButton">Fetch Message from Backend</button>
<p id="message"></p>
<script>
document.getElementById('fetchButton').addEventListener('click', function() {
fetch('/api/hello') // 调用后端接口
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json(); // 解析 JSON 响应
})
.then(data => {
document.getElementById('message').innerText = data.message; // 显示消息
})
.catch(error => {
console.error('Error:', error);
document.getElementById('message').innerText = 'Failed to fetch message: ' + error.message;
});
});
</script>
</body>
</html>
测试
点击按钮出现Hello from Golang backend!表示代理成功