详解vue或uni-app的跨域问题解决方案

最新推荐文章于 2025-07-15 17:36:32 发布

原创

最新推荐文章于 2025-07-15 17:36:32 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了Vue.js和Uni-App在处理跨域问题时的两种常见解决方案：服务器端配置和客户端代理。服务器端可以通过设置中间件允许跨域，而客户端可以利用代理欺骗浏览器实现跨域请求。重点讲解了Vue CLI和Uni-App的代理配置，包括`target`、`pathRewrite`、`changeOrigin`等关键参数的用法。

常见解决方案有两种

服务器端解决方案

服务器告诉浏览器：你允许我跨域

具体如何告诉浏览器，请看：

// 告诉浏览器，只允许 http://bb.aaa.com:9000 这个源请求服务器
$response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000');
// 告诉浏览器，请求头里只允许有这些内容
$response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin');
// 告诉浏览器，只允许暴露'Authorization, authenticated'这两个字段
$response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
// 告诉浏览器，只允许GET, POST, PATCH, PUT, OPTIONS方法跨域请求
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
// 预检
$response->header('Access-Control-Max-Age', 3600);

将以上代码写入中间件：