Aidex 移动端快速开发框架# RuoYi-Uniapp项目，uniapp vue app项目跨域问题

这篇具有很好参考价值的文章主要介绍了Aidex 移动端快速开发框架# RuoYi-Uniapp项目，uniapp vue app项目跨域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考地址：

manifest.json官方配置文档：manifest.json 应用配置 | uni-app官网

Chrome 调试跨域问题解决方案之插件篇：

uni-app H5跨域问题解决方案（CORS、Cross-Origin） - DCloud问答

其实uni-app官方有解决跨域的办法，官方推荐使用HBuilderX中内置的浏览器去预览，在内置的浏览器中不会存在跨域问题，但是要是在Chrome 浏览器中预览的话就会出现这个跨域问题，官方推荐使用Allow-Control-Allow-Origin: *插件的方式去解决，但是我试过这个插件，不知道是什么问题，并没有效果，跨域问题依旧还是存在，后面再仔细的看了下文档，看到了下面的提示。

uni-app 中 manifest.json->h5->devServer 实际上对应 webpack 的 devServer，鉴于 manifest 为 json 文件，故 webpack.config.js->devServer 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置，funciton 等复杂类型暂不支持。

manifest.json h5配置devServer,

与vue项目webpack项目vue.config.js配置格式一样，在ruoyi的项目在vue.config.js配置不生效。需要在此文件配置

"h5": {
    "template": "template.h5.html",
    "router": {
      "mode": "hash",
      "base": ""
    },
    "optimization": {
      "treeShaking": {
        "enable": false
      }
    },
    "title": "porraycloudApp",
    "devServer": {
      "disableHostCheck": true,
      "port": 8081,
      "proxy": {
        "/api": {
          "target": "http://gh.bb.com/webapi",
          "changeOrigin": true,
          "secure": false,
            "pathRewrite": {
              "^/api": ""
            }
        }
      }
    }

config.js baseUrl需要置空

Aidex 移动端快速开发框架# RuoYi-Uniapp项目，uniapp vue app项目跨域问题,uni-app,vue.js,前端

调用登录Post的接口路径测试

在路径前面加：/api,用来做跨域匹配替换。

Aidex 移动端快速开发框架# RuoYi-Uniapp项目，uniapp vue app项目跨域问题,uni-app,vue.js,前端

现在调试跨域问题解决了。

坑2：使用阿里云的服务器，/api一直跨域不生效

如下配置是一直访问不到服务api,原因是：

阿里云为了安全已经禁止直接用ip访问服务器。必须使用域名。

"devServer": {
"disableHostCheck": true,
"port": 8081,
"proxy": {
"/api": {
"target": "http://10.251.10.xx:80",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}文章来源地址https://www.toymoban.com/news/detail-674759.html