Vue.js SPA与Node.js API的CORS跨域问题求助

你遇到的核心问题是携带Authorization头的请求触发的OPTIONS预检请求被Nginx基础认证拦截——浏览器发送预检请求时默认不会携带Authorization凭证，直接被Nginx的认证规则挡住，同时你的CORS配置可能也没适配这种带凭证的跨域场景。下面分三步逐一解决：

1. 修改Nginx配置，跳过OPTIONS请求的基础认证 #

首先要让Nginx不对OPTIONS预检请求做校验，因为这类请求本身不需要携带认证凭证。在你的Nginx location配置中添加以下规则：

location /your-api-prefix {
    # 优先处理OPTIONS预检请求，直接返回允许跨域的响应头
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "你的Vue前端域名"; # 例：http://localhost:8080
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";
        add_header Access-Control-Allow-Credentials "true";
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 200;
    }

    # 保留你的原有基础认证配置
    auth_basic "Restricted Area";
    auth_basic_user_file /path/to/your/.htpasswd;

    # 反向代理到Node.js服务
    proxy_pass http://localhost:你的Node服务端口;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

这样OPTIONS请求会直接返回200，不会触发基础认证拦截。

2. 调整Express的CORS配置，支持凭证传递 #

虽然你已经安装了cors依赖，但需要明确开启凭证支持，确保响应头和Nginx配置匹配。修改你的Node.js入口文件：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS，严格指定前端域名并允许凭证
const corsOptions = {
    origin: '你的Vue前端域名', // 必须和Nginx中的Allow-Origin一致
    credentials: true, // 关键：允许携带Cookie、Authorization等凭证
    allowedHeaders: ['Authorization', 'Content-Type'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
};

app.use(cors(corsOptions));

// 注意：如果之前有手动处理OPTIONS请求的代码，请删除，cors中间件会自动处理
// 你的其他路由、业务逻辑配置...

app.listen(你的服务端口, () => {
    console.log('Node.js API server running');
});

3. 确保Vue端请求携带凭证 #

在Vue的main.js中，配置vue-resource时开启withCredentials，保证请求能正确携带Authorization头：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

// 全局配置请求基础选项
Vue.http.options.root = '你的API域名';
Vue.http.options.withCredentials = true; // 开启凭证携带

// 如果是手动设置Authorization头，在请求拦截器中添加：
Vue.http.interceptors.push((request, next) => {
    // 假设你的认证令牌存在localStorage中（比如Basic Auth的Base64字符串）
    const authToken = localStorage.getItem('authToken');
    if (authToken) {
        request.headers.set('Authorization', authToken);
    }
    next();
});

完成以上三步后，重启Nginx和Node.js服务，再测试API请求应该就能解决预检错误了。核心逻辑是让OPTIONS请求顺利通过，同时前后端的CORS配置统一支持凭证传递。

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