uni-app vue3-cli vite代理跨域问题_uniapp vue跨域_自夏

网络投稿 02-07 7613

在vue 中配置代理，百度出来一大堆，而uni-app vue3cli 项目配置却没有

uni-app 中只有H5 会存在跨域，小程序勾选不校验合法域名、web-view(业务域名）、TLS版来忽略跨域，APP不会存在跨域当然在uni-app中也可设置代理但是指针对 HBuilder X 中创建的uni-app的项目它是webpack 创建的可以在 devServer 配置代理，对应vite 创建的项目，自然是无效的

//manifest.json "devServer": { "proxy": { "/api": { "target": "http://192.168.88.8:8050", "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "" } } } }, vite 中配置代理跨域

下面代理是正确的配置，不要怀疑！！！下面代理是正确的配置，不要怀疑！！！下面代理是正确的配置，不要怀疑！！！

// vite.config.js import { defineConfig } from "vite"; export default defineConfig({ server: { proxy: { "/api": { target: "http://192.168.88.8:8050", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, });

因为设置了代理不需要域名前缀了，如果加上域名，请求会失败因为设置了代理不需要域名前缀了，如果加上域名，请求会失败因为设置了代理不需要域名前缀了，如果加上域名，请求会失败

当前项目启动后访问地址 http://192.168.88.65:3000 API接口地址 http://192.168.88.8:8050

正确 uni.request

http://192.168.88.65:3000/api//wxapplet/jssdkSign 在vite 中会代理到 http://192.168.88.8:8050/wxapplet/jssdkSign 这个接口，就绕过了不同源问题，成功跨域

uni.request({ //注意** 因为设置了代理所以不需要前面的域名，如果加上域名，请求会失败 // /api 是在vite 中配置的代理别名，所以这里要加上这个别名 wxapplet/jssdkSign才是真实的接口路径 url: '/api/wxapplet/jssdkSign', data: { url: 'http://192.168.88.65:3000/#/' }, method: 'POST', success(data) { console.log(data) } })

代理后成功请求地址（忽略打码地方） http://192.168.88.65:3000/api/wxapplet/jssdkSign 成功

封装问题在 uni.request 时，不要传入域名或者IP端口，会默认当前域名或者IP端口，如果传入后，就会引起不同源策略导致跨域，因为在H5 uni.request 中不传入域名或者IP端口会默认当前域名或者IP端口

错误的 uni.request

代理后 request 请求加上了IP地址 http://192.168.88.8:8050/api/wxapplet/jssdkSign

uni.request({ //注意** 因为设置了代理所以不需要前面的域名，如果加上域名，请求会失败 // /api 是在vite 中配置的代理别名，所以这里要加上这个别名 wxapplet/jssdkSign才是真实的接口路径 url: 'http://192.168.88.8:8050/api/wxapplet/jssdkSign', data: { url: 'http://192.168.88.65:3000/#/' }, method: 'POST', success(data) { console.log(data) } })

axios 中配置也是同理(跟上面一样)