Vue学习记录之二十六 Vue3中跨域

最新推荐文章于 2026-04-20 20:18:28 发布

原创

最新推荐文章于 2026-04-20 20:18:28 发布 · 1.2k 阅读

跨域（Cross-Origin）指的是浏览器的同源策略（Same-Origin Policy）限制了一个源（域、协议和端口）下的 JavaScript 脚本访问另一个源的资源。为了保护用户数据的安全，浏览器默认禁止网页向其他域发送请求或访问资源，这种限制称为跨域限制。

1. 同源策略

同源策略要求以下三者相同才算同源：

协议：如 http 和 https
域名：如 example.com
端口：如 :80 和 :443

例如：

http://example.com 和 https://example.com 是跨域的（协议不同）。
http://example.com 和 http://sub.example.com 是跨域的（域名不同）。
http://example.com:80 和 http://example.com:8080 是跨域的（端口不同）。

2. 常见的跨域场景

API 请求：前端应用需要向不同的 API 域名请求数据，例如从 http://localhost:3000 请求 http://api.example.com。
CDN 资源加载：网站从其他域名的 CDN 加载静态资源。
嵌套页面：通过 <iframe> 加载不同源的网页内容。

3. 解决跨域问题的方法

（1）CORS（跨域资源共享）

W3C标准，服务器可以通过设置 Access-Control-Allow-Origin 头部来允许跨域请求。CORS 是目前最主流的跨域解决方案，允许服务器设置哪些域可以访问其资源。IE不能低于IE10。主要用于服务端的配置。需要浏览器和服务器端同时支持。
可以使用中间件：cors

示例：

Access-Control-Allow-Origin: http://example.com
//或者
"Access-Control-Allow-Origin": "*"   //使用通配符，任何地址都可以访问，但安全性不高。

实例：
建立一个新的文件夹，使用 npm init 生成 package.json, 安装依赖

pnpm install koa -D   #koa模块
pnpm install koa-router -D # 路由模块
pnpm install koa2-cors -D  # 中间件模块
npm install -g nodemon #是一个实用程序，它监视 Node.js 应用程序中的文件变化，并在检测到变化时自动重新启动应用程序。它非常适合开发环境，因为它节省了手动重启服务器的时间和精力。 热启动

app.js

/*
1、http: Node.js 的核心模块，提供基本的 HTTP 功能，如创建服务器、处理请求和响应。它较为底层，使用时需要手动处理很多细节。
2、Express: 基于 http 的框架，简化了 HTTP 服务器的构建。它提供了更高层的 API，使路由、请求处理和中间件的使用更加便捷。适合快速开发 RESTful API 和 web 应用。
3、Koa: 由 Express 的创建者开发，是一个更轻量级且现代化的框架。Koa 使用 async/await 语法，允许更优雅的错误处理和中间件链管理。它的设计目标是更小、更强大、可扩展性更高。
*/
const Koa = require('koa')
const cors = require('koa2-cors')  //中间件
const app = new Koa()

const index = require('./router/index')
//实际开发中会配置域名白名单，只允许这些域名发起请求。
app.use(cors({
   
   
    origin: '*', // 相当于Access-Control-Allow-Origin：允许所有源，或者你可以指定特定的源如 'http://example.com/'
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
//将路由注册到应用。
app.use(index.routes(), index.allowedMethods(