调用Spotify API时出现CORS及网络错误问题求助

问题代码 #

获取Token的API函数 #

const APIController = async () => {
    const clientId = import.meta.env.VITE_CLIENTID //process.env.VITE_CLIENTID
    const clientSecret = import.meta.env.VITE_CLIENTSECRET // process.VITE_CLIENTSECRET

    const result = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Content-Type' : 'application/x-www-form-urlencoded', 
            'Authorization' : 'Basic ' + btoa(clientId + ':' + clientSecret)
        },
        body: 'grant_type=client_credentials'
    })

    const data = await result.json()
    console.log(data)
    return data
}

export default APIController

React组件中调用方式 #

import React, { useEffect } from "react"
import APIController from "../api/APIController"

const LandingPage = () => {

  useEffect(() => {
    APIController()
  }, [])

  return (
    <>
    </>
  )
}

export default LandingPage

遇到的错误 #

• Cross-Origin Request Blocked: 同源策略禁止读取远程资源 https://accounts.spotify.com/api/token（原因：CORS请求未成功）。状态码：(null)。
• Uncaught (in promise) TypeError: 尝试获取资源时发生网络错误。

另外，直接用node APIController.js运行脚本时，无法识别环境变量。

解决方案 #

1. 解决CORS问题 #

Spotify的Client Credentials授权流不允许在浏览器端直接调用，核心原因：

• 浏览器同源策略会拦截跨域请求；
• 前端直接暴露clientId和clientSecret会导致密钥泄露，存在安全风险。

推荐两种解决方式：

方式一：使用Vite代理配置

在项目根目录的vite.config.js中添加代理规则，让前端请求转发到Spotify API：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api/spotify': {
        target: 'https://accounts.spotify.com/api/token',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/spotify/, ''),
      },
    },
  },
})

修改API函数中的请求地址：

const result = await fetch('/api/spotify', {
  // 其余配置保持不变
})

方式二：搭建后端代理接口

用Node.js/Express写一个简单的后端接口，在后端发起请求，前端调用自己的后端接口：

// server.js
require('dotenv').config()
const express = require('express')
const fetch = require('node-fetch')
const app = express()
const port = 3001

app.post('/api/getSpotifyToken', async (req, res) => {
  const clientId = process.env.CLIENTID
  const clientSecret = process.env.CLIENTSECRET
  const auth = Buffer.from(`${clientId}:${clientSecret}`).toString('base64')

  try {
    const response = await fetch('https://accounts.spotify.com/api/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': `Basic ${auth}`
      },
      body: 'grant_type=client_credentials'
    })
    const data = await response.json()
    res.json(data)
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
})

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

前端API函数修改为调用后端接口：

const result = await fetch('http://localhost:3001/api/getSpotifyToken', {
  method: 'POST'
})

2. 解决环境变量问题 #

前端Vite项目中的环境变量

• 在项目根目录创建.env文件，变量名必须以VITE_开头：

VITE_CLIENTID=你的Spotify客户端ID
VITE_CLIENTSECRET=你的Spotify客户端密钥

• 重启Vite开发服务器，确保环境变量生效。

Node脚本中的环境变量

• 安装dotenv包：npm install dotenv --save
• 创建.env文件，变量名不需要VITE_前缀：

CLIENTID=你的Spotify客户端ID
CLIENTSECRET=你的Spotify客户端密钥

• 在脚本开头引入dotenv：

// CommonJS方式
require('dotenv').config()
// ES模块方式
import dotenv from 'dotenv'; dotenv.config();

• 使用process.env.CLIENTID和process.env.CLIENTSECRET获取变量。

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