跳到主要内容

5.2 开发代理、CORS 与环境配置

本章目标： 用最少配置完成本地联调，并理解生产环境为什么需要另一套安排。

什么是跨域​

浏览器按“协议 + 主机 + 端口”判断 origin。http://localhost:5173 与 http://localhost:5080 不同源，直接从前者请求后者可能需要 CORS。

Postman、curl 和 Swagger 能调用 API，不代表跨域网页也能调用，因为 CORS 是浏览器实施的规则。

学习阶段优先用 Vite 代理​

vue-lab/vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': { target: 'http://localhost:5080', changeOrigin: true },
    },
  },
});

前端调用 fetch('/api/tasks')。浏览器请求同源的 Vite 服务，Vite 再向 .NET 服务转发：

浏览器 :5173 → /api/tasks → Vite 开发代理 → ASP.NET Core :5080

后端接口已有 /api 前缀，不需要 rewrite。后端实际端口不同时修改 target，改完重启 Vite。

代理只在开发服务存在

server.proxy 不会进入 dist/，生产部署需要反向代理或真正配置 CORS。它也不能解决用户登录方案和服务端授权问题。

直接跨域时配置后端 CORS​

以下代码片段放到自己的 ASP.NET Core 应用中。服务注册必须在 builder.Build() 前，UseCors 在映射端点执行请求前生效：

Program.cs 配置片段
builder.Services.AddCors(options =>
{
    options.AddPolicy("VueDev", policy => policy
        .WithOrigins("http://localhost:5173")
        .AllowAnyHeader()
        .AllowAnyMethod());
});

// var app = builder.Build();
app.UseCors("VueDev");
// 后续 MapGet、MapPost 或 MapControllers。

JSON POST 或带 Authorization 头的跨域请求可能先发 OPTIONS 预检。Network 里若只有 OPTIONS 失败，应检查 CORS 和代理，不是继续改 DTO。

跨域 Cookie 请求片段
fetch('https://api.example.com/api/tasks', { credentials: 'include' });

后端还需精确 origin 配合 .AllowCredentials()，并设置符合场景的 Cookie SameSite / Secure。不能把 AllowAnyOrigin 与凭据开放混用。跨站 Cookie 也可能受浏览器隐私策略限制。

开发端口不同是不同源，但同主机 Cookie 的行为还涉及 site、域和路径，不能把“跨域”和“跨站”完全混为一谈。生产优先考虑同源部署简化这些边界。

环境变量​

.env.development 示例
VITE_API_BASE_URL=https://api-dev.example.com
const apiBase = import.meta.env.VITE_API_BASE_URL ?? '';

使用同源 /api 时可以不配置 apiBase。Vite 变量进入客户端产物；后端的连接串和签名密钥留在 .NET 配置系统中。

排错顺序​

现象首先检查
连接被拒绝API 是否运行，端口是否一致
404路径前缀、target、是否被 rewrite
返回 HTML请求可能被前端 SPA 回退处理
OPTIONS 失败CORS policy、允许方法和头
Cookie 不发送credentials、SameSite、Secure、域/路径
HTTPS 页面调用 HTTP API混合内容限制，统一使用 HTTPS

练习​

先用代理调用 API，观察浏览器 Network 中请求地址仍为 5173。再关闭 API，检查 Vite 终端和页面报错是否一致。

检查答案

浏览器不直接连接 5080，转发在开发服务器进行。后端关闭后 Vite 会报告代理连接失败；前端必须显示请求失败，不能将错误当作空列表。

参考：Vite 服务选项、ASP.NET Core CORS。