uniapp配置跨域无效 uniapp webview跨域

 2023-10-27    164  

环境要求: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)配置说明

  • /devApi 为项目的基础请求地址,仅用于本地环境,可自定义;
  • target 为真正需要访问的接口地址;
  • 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': '' } } }, }}
    •  标签:  

    原文链接:http://www.tpbz008.cn/post/40378.html

    =========================================

    http://www.tpbz008.cn/ 为 “电脑技术吧” 唯一官方服务平台,请勿相信其他任何渠道。

    热门标签
    最新留言
    友情链接