企业官网建设流程全解析

1. 为什么跨域问题会成为uni-app开发的拦路虎？

第一次用uni-app开发H5页面时，我兴冲冲地写好了接口请求代码，结果浏览器控制台突然跳出红色报错："Access-Control-Allow-Origin"。当时整个人都懵了，明明后端接口已经准备好了，前端代码也没问题，怎么就是拿不到数据？

后来才知道这是典型的浏览器跨域问题。简单来说，当你的前端页面运行在http://localhost:8080，而接口服务部署在http://api.example.com时，浏览器出于安全考虑会阻止这种"跨域"请求。这种安全机制叫做同源策略（Same-Origin Policy），它要求协议、域名、端口三者必须完全相同。

在uni-app的H5开发中，这个问题尤其常见。因为开发阶段我们通常用本地服务器调试，而接口往往部署在测试环境或生产环境。比如：

• 前端运行在：http://localhost:8080
• 接口地址是：https://api.yourcompany.com

这时候如果不做特殊处理，所有接口请求都会被浏览器拦截。我见过不少新手开发者被这个问题卡住好几天，甚至有人因此放弃uni-app转用其他框架，实在可惜。

2. 代理配置：前端开发的"跨域通行证"

2.1 代理服务器是如何解决跨域的？

代理服务器的原理其实很简单——它就像个中间人。浏览器不是不允许直接访问不同源的接口吗？那我们就让浏览器先访问同源的代理服务器，再由代理服务器去请求真正的接口。

这个过程完全发生在服务端，而服务端之间的通信是不受浏览器同源策略限制的。具体流程是这样的：

1. 前端请求/api/user（指向本地开发服务器）
2. 开发服务器识别到/api开头的请求需要代理
3. 开发服务器将请求转发到http://api.yourcompany.com/user
4. 获取响应后再返回给前端

这样在前端看来，所有请求都是在同源下完成的，完美避开了跨域限制。

2.2 uni-app中的代理配置实战

在uni-app项目中，我们主要通过修改vue.config.js或manifest.json来配置代理。我个人更推荐使用vue.config.js，因为它更灵活，配置也更清晰。下面是一个完整的配置示例：

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'https://api.yourcompany.com', // 接口域名 changeOrigin: true, // 是否改变源 secure: false, // 如果是https接口需要配置这个参数 pathRewrite: { '^/api': '' // 路径重写，去掉/api前缀 } } } } }

这个配置的意思是：所有以/api开头的请求都会被代理到https://api.yourcompany.com，并且请求路径中的/api会被移除。比如：

• 前端请求：/api/user/login
• 实际请求：https://api.yourcompany.com/user/login

3. 代理配置的五大核心参数详解

3.1 target：你的接口目标地址

target是最关键的参数，它指定了代理转发的目标地址。这里有几个常见坑点需要注意：

1. 协议要明确：一定要写http://或https://开头，不能只写域名
2. 结尾不要加斜杠：https://api.example.com是正确的，https://api.example.com/可能会导致路径拼接问题
3. 区分环境：开发环境和生产环境通常使用不同接口地址，建议通过环境变量区分

target: process.env.VUE_APP_API_BASE_URL || 'https://api.example.com'

3.2 changeOrigin：是否改变请求源

这个参数控制是否修改请求头中的Host字段。设置为true时，代理服务器会将自己的Host改为目标地址的Host。大多数情况下都应该设置为true，特别是当目标服务器做了Host校验时。

我曾经遇到一个案例：接口在changeOrigin:false时返回403错误，改成true后立即正常。这是因为后端Nginx配置了Host白名单。

3.3 pathRewrite：路径重写规则

pathRewrite用于修改请求路径，常见的使用场景包括：

1. 移除前缀：比如前端统一加/api前缀，但实际接口不需要
2. 添加前缀：有些老接口有固定前缀，但前端不想写
3. 复杂替换：可以使用正则表达式进行复杂替换

pathRewrite: { '^/api/old': '/new/api', // /api/old/user -> /new/api/user '^/api': '' // /api/user -> /user }

3.4 secure：HTTPS证书验证

当目标地址是HTTPS时，如果证书是自签名的或不受信任，需要设置secure:false来跳过证书验证。但在生产环境千万不要这么做，这是开发调试时的临时方案。

3.5 ws：WebSocket代理

如果你的应用使用了WebSocket，需要特别设置ws:true来代理WebSocket请求：

proxy: { '/socket': { target: 'ws://your-websocket-server', ws: true } }

4. 常见问题排查指南

4.1 配置改了但没生效？

这是新手最常遇到的问题，通常有以下几种原因：

1. 没有重新编译项目：修改代理配置后，必须重新运行npm run dev或npm run serve
2. 配置文件放错位置：vue.config.js必须放在项目根目录
3. 路径匹配问题：检查你的请求路径是否匹配代理规则中的/api

4.2 接口返回404错误

如果代理配置看似正确但接口返回404，可以按照以下步骤排查：

1. 打开浏览器开发者工具的Network面板
2. 查看请求是否真的被代理（请求URL应该是本地地址）
3. 检查代理后的实际请求URL是否正确
4. 用Postman直接请求目标地址，确认接口本身可用

4.3 出现"Please enable JavaScript to continue"

这个错误通常意味着：

1. 代理配置错误，请求被转发到了错误的地址
2. 后端服务器返回了错误的响应（比如HTML页面而非JSON数据）

解决方法：

1. 检查target地址是否正确
2. 确认pathRewrite规则是否符合预期
3. 检查后端服务是否正常运行

5. 高级技巧与最佳实践

5.1 多环境代理配置

实际项目中，我们通常需要对接多个环境。可以通过环境变量来动态配置代理：

// vue.config.js const env = process.env.NODE_ENV const proxyConfig = { dev: { target: 'https://dev.api.example.com', pathRewrite: { '^/api': '/dev-api' } }, test: { target: 'https://test.api.example.com', pathRewrite: { '^/api': '/test-api' } } } module.exports = { devServer: { proxy: { '/api': env === 'production' ? {} : proxyConfig[env] || proxyConfig.dev } } }

5.2 接口Mock方案

在前后端并行开发时，可以使用代理来实现接口Mock：

proxy: { '/api': { target: 'http://localhost:3000', // 本地Mock服务器 bypass: function(req) { if(req.headers.accept.indexOf('html') !== -1) { return '/index.html' } } } }

5.3 性能优化建议

1. 避免过度代理：只代理必要的接口，静态资源尽量本地化
2. 合理使用缓存：对于不常变的数据接口可以启用缓存
3. 压缩响应：确保代理服务器开启了响应压缩

记得第一次成功配置好代理时的兴奋感，那种"终于通了"的感觉至今难忘。现在每次看到团队新人被跨域问题卡住，我都会把这套配置方案分享给他们。配置代理虽然是个小技巧，但确实是uni-app H5开发中必须掌握的技能。