HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)

news2024/9/20 9:07:04

搭建一个前台uniapp,后台springboot的开发环境时,遇到了跨域问题。

console提示错误信息:

Access to XMLHttpRequest at 'http://10.0.180.203/api/cms/getAdList?apId=1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

network查看交互消息出现403错误码:

之前搭建vue开发环境时也遇到过,需要配置代理服务器

代理服务器配置方法如下:

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

我选择修改manifest.json的方案:

uni-app踩坑+小改造 - 掘金

修改时因为出现两个api(代理地址中有一个,baseUrl中也有一个),配好以后如果不通,可以用浏览器打开或者用api测试工具测试代理地址的api接口。

springboot后台服务器请求根地址:http://10.0.180.203/api

webpack-dev-server代理服务器请求根地址:http://localhost:8080/apiproxy 

 springboot后台服务器请求业务地址:http://10.0.180.203/api/rms/getPositionList?page=1&limit=10&latitude=&longitude=&pcitycode=220100000000

webpack-dev-server代理服务器请求业务地址:

http://localhost:8080/apiproxy/rms/getPositionList?page=1&limit=10&latitude=&longitude=&pcitycode=220100000000

 springboot后台服务器业务地址请求截图:

  webpack-dev-server代理服务器请求截图

 通过测试代理地址的api接口,发现代理地址请求路径中没有“/api”,说明“/api”已经隐藏在代理服务器后面,通过代理地址访问时,不对外显示。

/config/index.config.js配置:

// config/index.config.js

const CONFIG = {
        //开发环境配置
        development: {
                loginTitleTxt: "欢迎使用人才直聘", // 登录页标题
                copyrightTxt: "人才直聘v1.0", // 版本信息
                assetsPath: "/static/img", // 静态资源路径
                baseUrl: "http://localhost:8080/apiproxy",//"http://10.0.180.203/api", //"http://192.168.0.106:8080/api",  "http://localhost:8080/apiproxy"
				// baseUrl: "https://job.qinkonglan.cn/api",
				// baseUrl: "/api",//H5请选用该地址调试
                tokenKey: "WECHAT_TRADE", // 登录标识
                testOpenId: "oEjRxwy7jL9PgG0kWeb4VcDTZEas", // 小程序测试openId
                forcedLogin: false, // touristMode游客模式下APP是否强制用户登录 场景:当用户进入登录页面后无法后退。
                touristMode: true, // APP是否开启游客模式, 游客模式true开启:APP打开后可以进入首页和无权限的页面,游客模式false关闭:APP打开后首先需要登录才能进入, 此时forcedLogin配置项失效。
        },

        //生产环境配置
        production: {
                loginTitleTxt: "人才直聘", // 登录页标题
                copyrightTxt: "人才直聘v1.0", // 版本信息
                assetsPath: "/static/img", // 静态资源路径
				// baseUrl: "http://192.168.0.106:8092/api",
                baseUrl: "https://job.qinkonglan.cn/api",
                tokenKey: "WECHAT_TRADE", // 登录标识
                testOpenId: "oEjRxwy7jL9PgG0kWeb4VcDTZEas", // 小程序测试openId
                forcedLogin: false, // touristMode游客模式下APP是否强制用户登录 场景:当用户进入登录页面后无法后退。
                touristMode: true, // APP是否开启游客模式, 游客模式true开启:APP打开后可以进入首页和无权限的页面,游客模式false关闭:APP打开后首先需要登录才能进入, 此时forcedLogin配置项失效。
        }

}
export default CONFIG[process.env.NODE_ENV];

 manifest.json配置

{
    "name" : "人才直聘",
    "appid" : "",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    "app-plus" : {
        /* 5+App特有相关 */
        "modules" : {},
        /* 模块配置 */
        "distribute" : {
            /* 应用发布信息 */
            "android" : {
                /* android打包配置 */
                "permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            "ios" : {},
            /* ios打包配置 */
            "sdkConfigs" : {},
            "splashscreen" : {
                "ios" : {
                    "iphone" : {
                        "retina40" : ""
                    }
                }
            }
        },
        "splashscreen" : {
            "waiting" : true,
            "alwaysShowBeforeRender" : false,
            "autoclose" : false,
            "delay" : 0
        }
    },
    /* SDK配置 */
    "quickapp" : {},
    /* 快应用特有相关 */
    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : true,
            "minified" : false,
            "postcss" : true,
            "es6" : true
        },
        "permission" : {
            "scope.userLocation" : {
                "desc" : "用于设置公司位置信息或者职位工作地点"
            }
        },
        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
    },
    "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/apiproxy" : {
                    // "target" : "http://localhost:8099/api/",
                    "target" : "http://10.0.180.203/api", //"https://xxxxn/api",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/apiproxy" : "/"
                    }
                },
                "/gaode" : {
                    "target" : "https://restapi.amap.com/v3/geocode/regeo",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/gaode" : "/"
                    }
                },
                "/qq" : {
                    "target" : "https://apis.map.qq.com/ws/geocoder/v1/",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/qq" : "/"
                    }
                }
            }
        },
        "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    "key" : "TZCBZ-R333W-T27RS-OX3SB-RRJET-AWFVF"
                }
            }
        }
    }
}

所以配置在manifest.json中的原服务器地址已经设置/api路径时,在/config/index.config.js中的baseUrl项就不需要再配置/api路径了,只需要配置替代路径"/apiproxy",当然如果替代路径也写为“/api”,配置就像使用外部地址一样,/config/index.config.js中的baseUrl项只修改地址和端口号即可。

错误配置示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/948670.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常用框架分析(7)-Flutter

框架分析&#xff08;7&#xff09;-Flutter 专栏介绍Flutter核心思想Flutter的特点快速开发跨平台高性能美观的用户界面 Flutter的架构框架层引擎层平台层 开发过程使用Dart语言编写代码编译成原生代码热重载工具和插件 优缺点优点跨平台开发高性能美观的用户界面热重载强大的…

pinia——添加插件——基础积累

问题&#xff1a;是否给pinia添加过插件&#xff1f;具体添加的方式是什么&#xff1f; 在pinia中&#xff0c;我们可以为仓库添加插件&#xff0c;通过添加插件能够扩展以下的内容&#xff1a; 为 store 添加新的属性 定义 store 时增加新的选项 为 store 增加新的方法 包装现…

怎么传输大文件跨国,如何跨国快速传输大文件

在当前数字化时代的背景下&#xff0c;跨国传输大文件已经成为企业和个人工作中不可避免的挑战。尽管存在技术障碍和阻碍&#xff0c;但借助先进的技术和服务&#xff0c;我们仍能高效完成跨国大文件传输任务。接下来将介绍几种常见的跨国快速传输大文件的方法。 一、FTP文件传…

固定资产台账怎么管理

固定资产台账是指企业对固定资产进行登记、分类、统计和管理的账簿。固定资产管理系统是一款专业的固定资产管理软件&#xff0c;可以帮助企业实现资产全生命周期管理&#xff0c;包括资产采购、入库、领用、归还、维修、报废等环节。系统具有实时监控、预警提醒、报表分析等功…

PostgreSQL数据导入导出【亲测】有图有真相

pg_dump是用于备份PostgreSQL数据库的工具。它可以在数据库正在使用的时候进行完整一致的备份&#xff0c;并不阻塞其它用户对数据库的访问。 有图有真相 文章目录 导出导入压缩方法 导出 pg_dump -h 127.0.0.1 -p 5432 -U readuser mydatabase > dum.sql导入 1、导入整个…

函数和方法回顾、cbv源码分析、APIView执行流程分析、序列化组件介绍、序列化组件快速使用之序列化、常用字段类和参数、序列化组件之校验

一 函数和方法回顾 函数和方法-函数:使用def关键字定义的函数,有几个参数&#xff0c;就要传几个参数&#xff0c;不能多&#xff0c;不能少-----》按位置传&#xff0c;按关键字传-方法&#xff1a;定义在类内部&#xff0c;可以自动传值的函数称之为方法---》绑定给对象的方…

vue3+ts+tinynce在富文本编辑器菜单栏实现下拉框选择

实现效果 代码&#xff1a; <script lang"ts" setup> import Editor from tinymce/tinymce-vue import tinymce from tinymce; import { getIndicator } from /api/data-assets/data-dictoryimport {computed, ref} from "vue"; const props defin…

Linux centos7 bash编程——-求质数和

训练项目&#xff1a;使用函数求质数和。 定义一个函数IsPrime()&#xff0c;据此判断一个数是否为质数 由用户输入一个整数&#xff0c;求出比此数大的两个最小质数之和。 一、解决思路: 1.先在键盘上输入一个整数 2.求出比此数大的最小质数 3.再求出比此质数大的另一个…

【word技巧】word隐藏文字的方法

Word文件中有些内容想要隐藏&#xff0c;该如何隐藏&#xff1f;今天分享几个方法给大家 方法一&#xff1a; 最简单的方法&#xff0c;将字体颜色与背景颜色设置为一致的&#xff0c;这样就达到了隐藏的效果&#xff0c;选中文字再修改颜色就可以恢复字体 方法二&#xff1a…

HCIP-OpenStack组件之网络服务Neutron(ovs、ovn)

1、Linux网络虚拟化基础 Neutron最为核心的工作是对二层物理网络的抽象与管理&#xff0c;物理服务器虚拟化后&#xff0c;虚拟机的网络功能由虚拟网卡&#xff08;vNIC&#xff09;和虚拟交换机&#xff08;vSwitch&#xff09;提供&#xff0c;各个vNIC连接在vSwitch的端口上…

DDD 与 CQRS 才是黄金组合

在日常工作中&#xff0c;你是否也遇到过下面几种情况&#xff1a; 使用一个已有接口进行业务开发&#xff0c;上线后出现严重的性能问题&#xff0c;被老板当众质疑&#xff1a;“你为什么不使用缓存接口&#xff0c;这个接口全部走数据库&#xff0c;这怎么能抗住&#xff01…

前端(十六)——微信小程序语音转文字,文字转语音功能的实现

&#x1f60a;博主&#xff1a;小猫娃来啦 &#x1f60a;文章核心&#xff1a;微信小程序语音转文字&#xff0c;文字转语音功能的实现 文章目录 资源下载链接最关键的问题控制台报错30003语音转文字文字转语音效果图应用场景作用和优势实现思路 资源下载链接 CSDN资源下载&am…

【C51基础实验 LED闪烁】

51单片机项目基础篇 LED闪烁1、硬件电路设计和原理分析2、软件设计2.1、功能实现&#xff1a;LED闪烁2.2、通过 KEIL 软件自带仿真查看延时时间 4、编译结果5、结束语 LED闪烁 前言&#xff1a; 前一篇学会了点亮一颗LED以及驱动原理&#xff0c;那么这篇紧接着就来解锁LED的新…

智慧排水监测系统:创新监测技术保障排水系统安全运行

城市排水系统作为城市基础设施的重要组成部分&#xff0c;其安全运行直接关系到环境卫生、居民生活和城市发展。为了确保排水系统的顺畅运行&#xff0c;传统的监测手段已经不能满足日益复杂的城市排水需求&#xff0c;物联网技术的快速发展为排水系统的监测带来了巨大的便利&a…

正中优配:IPO刹车,再融资转向,A股投融资动态平衡

继8月18日推出“一揽子”方针措施后&#xff0c;证监会近来表态&#xff0c;将充分考虑当时商场局势&#xff0c;对IPO、再融资节奏作出安排&#xff1a;包含阶段性收紧IPO节奏、促进投融资两头的动态平衡&#xff1b;优化再融资监管。 “目前商场资金面偏弱&#xff0c;阶段性…

java八股文面试[多线程]——CAS同步机制

AtomicInteger 源码解析&#xff1a; public class AtomicInteger extends Number implements java.io.Serializable {// 设置使用Unsafe.compareAndSwapInt进行更新private static final Unsafe unsafe Unsafe.getUnsafe();private static final long valueOffset;static {t…

electron win系统通知修改通知标题栏

标题栏的 electron.app.Electron 如何修改&#xff1a; var package require("../package.json"); app.setAppUserModelId(package.description); app.setAppUserModelId 在主进程的app这里修改

git rebase和merge区别

一、概述 merge和rebase 标题上的两个命令&#xff1a;merge和rebase都是用来合并分支的。 这里不解释rebase命令&#xff0c;以及两个命令的原理&#xff0c;详细解释参考这里。 下面的内容主要说的是两者在实际操作中的区别。 1.1 什么是分支 分支就是便于多人在同一项目…

Python中object类的特殊方法

目录标题 前言一、object类的源码二、常用特殊方法解释1.__getattribute__方法2.__setattr__方法3.__delattr__方法4.__dir__方法5.__eq__和__hash__6.__ gt__、__ lt__、__ ge__、__ le__7.__str__和__repr__8.__new__方法9.__sizeof__方法10.__ class__、__ dict__、__ modul…

基于java swing和mysql实现的电影票购票管理系统(源码+数据库+运行指导视频)

一、项目简介 本项目是一套基于java swing和mysql实现的电影票购票管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…