自学内容网 自学内容网

uniapp跨域问题解决方案

uniapp跨域问题解决方案

引言

在使用 uni-app 本地开发 H5> 平台时,需要使用浏览器进行调试,而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面,同时这个页面会调一些现有的接口时,就面临着跨域的问题。

解决方案

方案一

manifest.json 去配置 h5.devServer.proxy 解决跨域问题。
直接配置即可解决:要检查 manifest.json 中是否有 h5 相关配置,如果有则直接基于之前的追加配置,如果没有则新增h5如下配置keyvalue全部要用英文双引号 “”引起来。

"h5": {
"devServer": { // 开发环境
"proxy": { // 代理转发
"/api": {
"target": "https://mock.xxxxx.com/xxxxx", // 以/api 开头的代理到target指定地址 
"pathRewrite": {
"^/api": "" 
}
}
}
}
},

uniapp跨域问题解决方案

方案二

在项目根目录直接创建一个 vue.config.js 文件,并在里面配置 devServer ,直接上代码

module.exports = {
devServer: { // 开发环境
proxy: { // 代理转发
'/api': {
target: ' https://mock.xxx.com/mock/63fcbc2d7c016026ff2b8cd8/education-app', // 以/api 开头的代理到target指定地址
pathRewrite: {
'^/api': '' // 其中请求地址开头的 /api 替换为 ''
}
}
}
}
}

uniapp跨域问题解决方案

最终效果:
uniapp跨域问题解决方案

注意:以上两种方案不能同时使用,第一种会覆盖第二种方案。
完结~


原文地址:https://blog.csdn.net/qq_42696432/article/details/143973104

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!