uniapp解决跨域问题处理(uniapp配置跨域无效)

环境要求:vue3。本文不适用于vue2或在manifest.json中配置。解决方案:(1)需要项目的根路径下面新建文件,名称为:vite.config.js;(2)将以下代码复制进去:imp

uniapp解决跨域问题处理(uniapp配置跨域无效)

环境要求:vue3。 本文不适用于vue2 或在manifest.json中配置。

解决方案

(1)需要项目的根路径下面新建文件,名称为:vite.config.js;

(2) 将以下代码复制进去:

import {defineConfig} from \'vite\';import uni from \'@dcloudio/vite-plugin-uni\';export default defineConfig({server: {proxy: {\'/devApi\': {target: \'http://192.168.0.1:7272/api\',changeOrigin: true,rewrite: (path) => path.replace(/^\\/devApi/, \'\'),},},},plugins: [uni()],});

(3)配置说明

  1. /devApi 为项目的基础请求地址,仅用于本地环境,可自定义;
  2. target 为真正需要访问的接口地址;
  3. rewrite: 为需要将访问的部分地址的路径换掉。如上配置为将/devApi 换为空字符串。

(4)样例解释(以上配置代码对应环境解释)

本地测试访问配置的地址为(前面无须加http等): /devApi/login运行代码到chrome浏览器,控制台network显示的是访问:http://localhost:XXX/devApi/login;经过本配置后,实际代理访问的请求地址:http://192.168.0.1:7272/api/login

注意:本代码仅适用vite和vue3配置。不适用vue2等;

如果上述代码无效,请关闭正在运行项目,再重新运行。

(5)常见问题如下

问题:uni-app设置跨域代理。pathRewrite重写路径在vue2有效、vue3无效。

解决:经检查问题出现在manifest.json中h5字段配置跨域代理,其仅对vue2有效。可代理地址,但pathRewrite无效。


问题:vue2如何配置跨域代理?

解决:方案有两种,参考如下

方案1:manifest.json中配置为:

// manifest.json{    \"h5\": {        \"devServer\": {            \"proxy\": {                \"/devApi\": {                    \"target\": \"http://192.168.0.1:7272/api\",                    \"pathRewrite\": {                        \"^/devApi\": \"\"                    }                }            }        }    }}

方案2:项目根路径下新建vue.config.js

// vue.config.jsmodule.exports = {  devServer: {    proxy: {      \'/devApi\': {        target: \'http://192.168.0.1:7272/api\',        pathRewrite: {          \'^/devApi\': \'\'        }      }    },  }}

本文内容(包含图片或视频在内)系用户自行上传分享,网站仅提供信息存储服务。如作品内容涉及版权问题,请及时与鱼捕头联系,我们将在第一时间删除。文章地址:https://www.yubutou.com/90709.html

(0)
网友投稿的头像网友投稿
上一篇 2023年9月25日 15:34:04
下一篇 2023年9月25日 15:34:10

相关推荐

发表回复

登录后才能评论

联系我们

17896001082

在线咨询: QQ交谈

邮件:2718562165@qq.com

工作时间:周一至周五,9:00-18:00,节假日休息