Hostinger部署的React应用连接VPS上Strapi后端的CORS问题求助

问题根源 #

核心问题在VPS端的跨域（CORS）配置未正确允许Hostinger托管网站的域名访问，同时请求头里的Origin: null可能是Hostinger部署环境导致的Origin传递异常，但解决的关键还是VPS侧的CORS规则配置。

具体解决方法 #

1. 修正Strapi自身的CORS配置 #

Strapi内置CORS中间件，直接配置最可靠：

• 找到Strapi项目根目录下的config/middlewares.js（新版可能是src/middlewares.js）
• 修改strapi::cors部分，把Hostinger网站域名加入允许列表：

module.exports = [
  // 保留其他中间件配置
  {
    name: 'strapi::cors',
    config: {
      origin: ['https://你的Hostinger域名.com', 'http://localhost:3000'], // 同时保留本地开发域名
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
      credentials: true,
    },
  },
  // 保留其他中间件配置
];

• 重启Strapi服务，确保配置生效。

2. 检查并配置VPS上的Nginx反向代理CORS规则 #

如果Strapi通过Nginx反向代理对外提供服务，Nginx需要同步配置CORS响应头，避免覆盖Strapi的设置：

• 打开Strapi对应的Nginx配置文件（通常在/etc/nginx/sites-available/目录下）
• 在location /api块或服务器根块中添加以下配置：

# 允许指定域名跨域
add_header Access-Control-Allow-Origin "https://你的Hostinger域名.com";
add_header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization, Content-Type";
add_header Access-Control-Allow-Credentials "true";

# 处理OPTIONS预请求，直接返回204
if ($request_method = OPTIONS) {
    return 204;
}

• 若需要允许多个域名，可使用map指令动态匹配：

map $http_origin $cors_origin {
    default "";
    "https://你的Hostinger域名.com" $http_origin;
    "http://localhost:3000" $http_origin;
}

server {
    # 其他Nginx配置...
    add_header Access-Control-Allow-Origin $cors_origin;
    # 其他CORS头配置同上
}

• 执行sudo nginx -t检查配置语法，无误后执行sudo systemctl reload nginx重启Nginx。

3. 排查Hostinger端的Origin异常问题 #

请求头里的Origin: null不符合正常托管网站的请求逻辑，可尝试：

• 临时关闭Hostinger后台的CDN服务，测试请求是否能正常传递Origin；
• 确认React项目构建时的环境变量配置正确，比如设置REACT_APP_API_URL=https://你的VPS域名/api，避免直接使用IP访问（建议给VPS绑定域名并配置HTTPS，IP访问可能触发浏览器安全限制）。

4. 验证CORS配置是否生效 #

用curl命令测试跨域请求：

curl -H "Origin: https://你的Hostinger域名.com" -H "Authorization: bearer 你的Token" -I https://你的VPS域名/api/categories?populate=*

检查响应头中是否包含Access-Control-Allow-Origin且值为你的Hostinger域名，同时其他CORS相关头是否存在。

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