解决本地浏览器的跨域问题

### uniapp Vue3 版本中解决网页浏览器跨域问题的方法 #### 服务端设置 CORS 为了使客户端能够访问不同源的服务端资源，可以在服务端启用跨域资源共享 (CORS)。当服务器响应带有合适的 `Access-Control-Allow-Origin` 头部时，浏览器允许该请求成功执行[^2]。 ```javascript // Node.js Express 示例代码 const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); app.get('/data', function(req, res){ res.json({ message: 'This is CORS-enabled for all origins!' }); }); app.listen(80, function(){ console.log('CORS-enabled web server listening on port 80'); }); ``` #### 使用 HBuilderX 的内置代理功能 对于开发环境中的跨域问题，可以利用 HBuilderX 提供的 devServer 配置项，在项目根目录下的 `manifest.json` 文件内进行如下配置： ```json { "h5": { "devServer": { "port": 8080, "disableHostCheck": true, "proxy": { "/api": { "target": "https://example.com", "changeOrigin": true, "pathRewrite": { "^/api": "" } } }, "https": false } } } ``` 此方式通过本地启动的服务作为中介转发请求至实际的目标地址，从而绕过浏览器同源策略限制[^3]。 #### JSONP 方案（不推荐） 尽管 JSONP 是一种较早用于处理跨域的技术手段，但由于其仅支持 GET 请求且安全性较低等原因，在现代 Web 开发实践中已逐渐被淘汰。因此不再建议采用这种方式来解决问题[^1]。