Svelte使用第三方API遇到CORS问题，前端修改及代理均无效如何解决？

前置常识 #

• 前端代码自行设置Access-Control-Allow-Origin这类响应头完全无效，CORS是浏览器针对前端跨域请求的安全策略，只能通过服务端/代理层解决

开发环境修复（解决之前代理不生效问题） #

目前主流Svelte项目均基于Vite构建，按以下配置内置代理即可，不需要额外搭建独立服务：

// vite.config.js 配置文件
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  server: {
    proxy: {
      // 自定义请求前缀，所有以/api开头的请求都会被代理到目标接口
      '/api': {
        target: 'https://gdchallengelist.com/api/v1/',
        changeOrigin: true,
        // 去掉前缀后转发到目标接口，比如请求/api/list 实际会转发到https://gdchallengelist.com/api/v1/list
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

配置完成后，前端所有请求直接写相对路径即可，比如fetch('/api/xxx')，不要直接调用第三方接口的全路径。

生产环境修复 #

方案1：SvelteKit项目优先用服务端加载（最快10分钟搞定） #

如果用的是SvelteKit框架，直接在服务端加载函数中发起请求，服务端请求不存在浏览器CORS限制：

// 示例：src/routes/+page.server.js
export async function load({ fetch }) {
  // 直接调用第三方全路径接口即可
  const res = await fetch('https://gdchallengelist.com/api/v1/你的实际接口路径')
  const apiData = await res.json()
  // 数据会自动传递到对应页面组件
  return { apiData }
}

页面组件中直接取值即可：

<!-- 对应页面svelte文件 -->
<script>
  export let data;
  const { apiData } = data;
</script>
<!-- 直接渲染数据即可 -->

方案2：普通Svelte项目搭极简中转代理 #

如果是无服务端的普通Svelte项目，写几行代码搭建一个极简代理服务，部署到任意Node环境即可：

// proxy.js 代理服务代码
const express = require('express')
const { createProxyMiddleware } = require('http-proxy-middleware')
const app = express()

// 允许前端跨域调用本代理服务
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

// 转发所有请求到目标第三方接口
app.use('/api', createProxyMiddleware({
  target: 'https://gdchallengelist.com/api/v1/',
  changeOrigin: true,
  pathRewrite: {'^/api' : ''}
}))

app.listen(3000, () => console.log('代理服务启动在3000端口'))

部署完成后，前端请求替换为你的代理服务地址即可，比如fetch('你的代理服务地址/api/xxx')。

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