如何同时运行Svelte与Go并解决前后端端口差异问题

首先纠正一个小错误：你提到的Svelte启动命令应该是npm run dev，不是npm go dev。

针对前后端不同端口导致的跨域问题，有两种常用解决方式：

方案一：Svelte配置开发代理（推荐开发环境使用） #

如果你的Svelte项目是基于Vite构建的（当前Svelte官方模板默认用Vite），可以通过配置代理转发API请求到后端端口，避免跨域问题。

修改项目根目录下的vite.config.js（或vite.config.ts）：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    proxy: {
      // 匹配所有以/api开头的请求
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
});

配置完成后，前端代码中请求后端接口时，直接使用相对路径即可，比如：

// 实际会转发到http://localhost:8080/api/user
fetch('/api/user')
  .then(res => res.json())
  .then(data => console.log(data));

方案二：Golang后端配置CORS #

如果不想用代理，可在Golang后端添加CORS响应头，允许前端所在端口的请求访问。

原生实现方式 #

直接在请求处理逻辑中设置CORS头：

package main

import "net/http"

func main() {
  http.HandleFunc("/api/", func(w http.ResponseWriter, r *http.Request) {
    // 允许前端端口的跨域请求
    w.Header().Set("Access-Control-Allow-Origin", "http://localhost:50838")
    // 允许的请求方法
    w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
    // 允许的请求头
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    // 处理OPTIONS预检请求
    if r.Method == "OPTIONS" {
      w.WriteHeader(http.StatusOK)
      return
    }

    // 这里写你的业务逻辑
    w.Write([]byte("来自Go后端的响应"))
  })

  http.ListenAndServe(":8080", nil)
}

使用第三方库简化实现 #

可以用github.com/rs/cors库快速配置CORS：

package main

import (
  "net/http"
  "github.com/rs/cors"
)

func main() {
  mux := http.NewServeMux()
  mux.HandleFunc("/api/", func(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("来自Go后端的响应"))
  })

  // 配置CORS规则
  c := cors.New(cors.Options{
    AllowedOrigins: []string{"http://localhost:50838"},
    AllowedMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
    AllowedHeaders: []string{"Content-Type"},
  })

  // 包装路由处理器
  handler := c.Handler(mux)
  http.ListenAndServe(":8080", handler)
}

启动步骤 #

• 打开第一个终端，进入Svelte项目目录，执行npm run dev启动前端服务（端口50838）
• 打开第二个终端，进入Golang项目目录，执行go run .启动后端服务（端口8080）

内容的提问来源于stack exchange，提问作者부건혁