仅影响Safari和Firefox的CORS预检错误解决方案咨询

问题根源 #

你遇到的错误是因为Firefox/Safari在跨域请求时自动携带的user-agent头不在Pexels API允许的跨域请求头列表里，导致预请求（OPTIONS）被拦截。另外，直接在前端暴露NEXT_PUBLIC_API_KEY存在密钥泄露风险，建议通过服务端转发请求。

方案一：用Next.js API路由做代理（推荐） #

1. 在pages/api目录下新建pexels/curated.js文件，内容如下：

import { createClient } from 'pexels'; // 确保已安装pexels包

export default async function handler(req, res) {
  const { page = 1 } = req.query;
  const client = createClient(process.env.PEXELS_API_KEY); // 改用非NEXT_PUBLIC的环境变量，避免密钥暴露

  try {
    const response = await client.photos.curated({ per_page: 10, page });
    res.status(200).json(response);
  } catch (error) {
    res.status(error.response?.status || 500).json({ error: error.message });
  }
}

2. 修改环境变量配置：

   • 将.env.local中的NEXT_PUBLIC_API_KEY改为PEXELS_API_KEY（去掉NEXT_PUBLIC前缀，确保密钥仅在服务端可见）

3. 更新前端调用代码，改为请求自己的API路由：

const getCuratedPhotos = async (page?: number) => {
  console.log('pages', page);
  try {
    const res = await fetch(`/api/pexels/curated?page=${page || 1}`);
    return await res.json();
  } catch (e) {
    console.log('error', e);
  }
}

方案二：通过Next.js重写规则配置代理 #

如果不想单独编写API路由，可在next.config.js中配置重转发规则：

1. 修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    domains: ["images.pexels.com", "www.pexels.com"],
  },
  transpilePackages: ['chic-ui'],
  compiler: {
    styledComponents: true
  },
  async rewrites() {
    return [
      {
        source: '/api/pexels/:path*',
        destination: 'https://api.pexels.com/v1/:path*',
        headers: {
          Authorization: `Bearer ${process.env.PEXELS_API_KEY}`,
          // 移除或设置Pexels允许的User-Agent头
          'User-Agent': '', 
        },
      },
    ];
  },
}

module.exports = nextConfig

2. 同样将环境变量改为PEXELS_API_KEY，前端调用代码更新为：

const getCuratedPhotos = async (page?: number) => {
  console.log('pages', page);
  try {
    const res = await fetch(`/api/pexels/curated?per_page=10&page=${page || 1}`);
    return await res.json();
  } catch (e) {
    console.log('error', e);
  }
}

关键注意事项 #

• 禁止在前端直接使用NEXT_PUBLIC_前缀的环境变量存储API密钥，否则会导致密钥公开泄露。
• 方案一的API路由更灵活，便于后续添加请求校验、缓存等扩展逻辑，优先推荐使用。

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