SvelteKit调用Express后端出现CORS错误，求解决方案

方法一：后端Express配置CORS中间件 #

• 1. 在backEnd目录下执行命令安装cors依赖：
     npm install cors
• 2. 修改backEnd/app.js代码，引入并启用CORS中间件：

let express = require("express")
let cors = require("cors")
let app = express()
let PORT = process.env.PORT || 3000

// 全局启用CORS，允许所有域名请求
app.use(cors())

app.get("/api", (req, res) => {
    res.json({message: "Hello World"})
})

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`)
})

如果需要限制仅允许前端域名（比如SvelteKit默认dev端口5173）访问，可将app.use(cors())替换为：
app.use(cors({ origin: "http://localhost:5173" }))

方法二：前端SvelteKit配置代理（无需修改后端） #

• 1. 在frontEnd目录下创建vite.config.js（若已存在则直接修改），添加代理配置：

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

export default defineConfig({
    plugins: [sveltekit()],
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true
            }
        }
    }
});

• 2. 修改frontEnd/src/routes/+page.js中的fetch路径为相对路径：

export let load = async ({ fetch }) => {
    let rawRes = await fetch("/api")
    let data = await rawRes.json()

    return {data: data}
}

重启前端dev服务后，代理会自动将前端的/api请求转发到后端http://localhost:3000/api，规避跨域问题。

内容的提问来源于stack exchange，提问作者DanielCoding