使用Axios和CORS无法从Fastify Node服务器获取数据的问题

我近期使用Fastify搭建了一个Node服务器，尝试通过Axios与React前端进行集成，同时在后端配置了@fastify/cors以允许跨域访问，但仍出现CORS相关错误。Node服务器、Docker和React应用均已正常运行，怀疑是Node代码中的CORS注册配置或React中api调用的问题，检查过地址并参考Fastify CORS文档但未解决。

Node服务器代码 #

import fastify from 'fastify'
import cookie from '@fastify/cookie'
import websocket from '@fastify/websocket'
import { createPoll } from './routes/create-poll'
import { getPoll } from './routes/get-poll'
import { voteOnPoll } from './routes/vote-on-poll'
import { pollResults } from './ws/poll-results'
import cors from '@fastify/cors'

const app = fastify()

app.register(cors, {
    origin: true
})

app.register(cookie, {
    secret: "polls-app-nlw-lrc",
    hook: 'onRequest',
})

app.register(websocket)

app.register(createPoll)
app.register(getPoll)
app.register(voteOnPoll)
app.register(pollResults)

app.listen({port: 3333}).then(()=> {
    console.log('HTTP server running!')
})

React中Axios相关代码 #

import axios from "axios"

const api = axios.create({
    baseURL: 'http://localhost:3333'
  })

export function Select(){
    api.get('/polls/:pollId').then( (response) => {
        console.log(response)
    })

    return()}

解决步骤 #

1. 修正Axios请求的路径参数错误 #

你的React代码中直接使用占位符:pollId作为请求路径，Axios不会自动解析该占位符，会导致请求路径变为/polls/:pollId，后端可能返回404，浏览器易将此错误与CORS混淆。需替换为实际投票ID：

// 静态ID示例
api.get('/polls/123').then(response => {
    console.log(response);
});

// 动态传入ID示例
const pollId = 'your-real-poll-id';
api.get(`/polls/${pollId}`).then(response => {
    console.log(response);
});

2. 明确CORS的origin配置 #

origin: true虽会自动允许请求来源，但在Docker网络、多端口环境等场景可能识别异常，建议直接指定前端运行地址：

app.register(cors, {
    origin: 'http://localhost:3000', // 替换为你的React应用实际端口
    credentials: true // 若需携带Cookie，必须开启此选项
});

生产环境可设置为具体域名或正则表达式匹配允许的域名。

3. 确认Docker端口映射与网络 #

若Node服务运行在Docker容器中，需确保容器3333端口已正确映射到主机，且React应用访问的localhost:3333能指向容器内服务。若使用自定义Docker网络，可能需要用容器名称或内部IP替代localhost。

4. 查看具体CORS错误信息 #

打开浏览器开发者工具（F12），在控制台或网络面板查看完整CORS错误提示，比如是Access-Control-Allow-Origin不匹配，还是缺少Access-Control-Allow-Credentials等响应头，根据提示调整配置。

5. 检查插件注册顺序 #

确保@fastify/cors插件在所有路由插件之前注册，保证全局CORS配置覆盖所有路由。当前代码中CORS注册顺序正确，但需确认后续路由插件未单独设置CORS规则导致冲突。

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