前端/后端-配置跨域

1. 什么是跨域

协议（http /https）、域名（localhost / www.xxx.com）、端口（5173 / 3000 / 80）只要有一个不一样，就是跨域！

2. 浏览器为什么要禁止跨域？

假设你登录了淘宝，cookie 存在浏览器。此时你打开一个 恶意网站。

恶意网站想：我直接发请求到 taobao.com/pay 转账！

如果没有跨域限制：

浏览器会自动带上淘宝的 cookie
恶意网站就能偷偷转走你的钱

浏览器为了阻止这种事，规定：

只有淘宝自己的页面，才能请求淘宝接口！

别的网站一律禁止！

这就是：同源策略

3. 为什么你本地开发会跨域？

前端跑在 5173
后端跑在 3000

在浏览器眼里：这是两个不同的 "网站"！

4. 前端设置跨域

vite.config.js

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // 必须有
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 转发到后端
        changeOrigin: true
      }
    }
  }
})

api.js

javascript 复制代码

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: '/api', //是为了触发代理！
  timeout: 10000
})

注：

只要前端 baseURL 带 /api，后端接口就必须带 /api！

前后路径必须完全一样，才能匹配上！

5. 后端设置跨域

1.下载依赖cors

javascript 复制代码

npm install cors

如：在server.js里面加入一下两行代码

javascript 复制代码

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

// 👇 就这两行，解决所有跨域！
const cors = require('cors');
app.use(cors());

3.运行代码

javascript 复制代码

node server.js

注：

后端配置跨域后，前端就不需要跨域了，把vite.config.js还原，api的baseUrl用后端服务地址就行。

javascript 复制代码

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: 'http://localhost:3000', //后端服务地址
  timeout: 10000
})

6. 前端跨域和后端跨域的区别

一、前端跨域 = 前端代理

就是：Vite / Webpack 帮你转发请求。

原理：

前端访问自己：/api/xxx
Vite偷偷转发到后端
浏览器以为是同域，不拦截

特点：

只在本地开发有用
上线后失效
必须加前缀 /api 来触发转发
后端接口必须对应 /api
不适合图片、文件上传（容易坏）
本质：绕开浏览器限制，不是真正解决

二、后端跨域 = CORS

就是：后端告诉浏览器：允许前端访问我。

原理：

后端在响应头里加一句："我允许这个前端调用我"浏览器看到就放行。

特点：

开发、生产环境都能用
真正、标准、官方的跨域方案
前端不用加 /api
后端不用加 /api
完美支持图片、文件上传
本质：真正解决跨域