Чтобы разместить одностраничное приложение на Vue.js и бэкэнд на Golang на одном HTTP-сервере с использованием HTTPS и избежать ошибок Mixed Content, необходимо:
1. Настроить HTTPS:
Для обоих приложений (фронтенд и бэкэнд) должно быть настроено защищенное соединение через HTTPS. Это избавит от ошибок Mixed Content, которые возникают при попытке загрузить ресурсы по HTTP на страницу, загруженную по HTTPS.
2. Разместить фронтенд и бэкэнд за одним прокси:
Используйте обратный прокси-сервер (например, Nginx или Caddy), чтобы обрабатывать входящие HTTPS-запросы и маршрутизировать их к соответствующим приложениям (Vue-фронтенд или Go-бэкэнд). Обратный прокси также может выступать в роли сервера для статических файлов Vue приложения.
Пример конфигурации для Nginx:
```nginx
server {
listen 443 ssl;
server_name example.com;
# SSL Configuration
ssl_certificate /path/to/fullchain.pem;
ssl_certificate_key /path/to/privkey.pem;
# Static files serving for Vue.js frontend
location / {
root /path/to/vue/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# Proxy pass for Golang backend API
location /api/ {
proxy_pass http://localhost:8080/; # Suppose Go server is running on port 8080
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# Add other configurations (like gzip, log files, etc.)
}
```
В этом примере запросы к корневому URL (`/`) будут обслуживаться через папку `dist` вашего Vue-приложения, где находятся статические файлы (после выполнения `npm run build` в вашем Vue-проекте).
Запросы, начинающиеся с `/api/`, будут перенаправляться на бэкэнд-приложение Golang, которое запущено локально на порту 8080.
Чтобы обеспечить правильную работу HTTPS и защитить ваш сервер, не забудьте получить валидный SSL/TLS-сертификат, например, от Let's Encrypt.
3. CORS:
Убедитесь, что ваш Golang бэкэнд обрабатывает CORS (Cross-Origin Resource Sharing) правильно, чтобы разрешить фронтенду доступ к ресурсам бэкэнда. Можно настроить бэкэнд так, чтобы он отправлял соответствующие заголовки `Access-Control-Allow-Origin`, совпадающие с доменом вашего фронтенда.
Используйте библиотеки для CORS, чтобы упростить настройку, например:
```go
import (
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
// Настройка CORS
config := cors.DefaultConfig()
config.AllowOrigins = []string{"https://example.com"} // Или "*" для всех доменов (не рекомендуется)
router.Use(cors.New(config))
// Определите маршруты
router.Run(":8080")
}
```
В приведенном выше коде для Golang используется фреймворк Gin для установки CORS-политики. Это позволяет запросам с фронтенд-дом