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

这篇具有很好参考价值的文章主要介绍了HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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错误码:

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

之前搭建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后台服务器业务地址请求截图:

HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin),json  webpack-dev-server代理服务器请求截图

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

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

/config/index.config.js配置:

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

// 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配置

HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin),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项只修改地址和端口号即可。

错误配置示例

HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin),json文章来源地址https://www.toymoban.com/news/detail-684234.html

到了这里,关于HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决系统开发中的跨域问题:CORS、JSONP、Nginx

    本博客配套的源码在这里 最近我在做一个系统的全栈开发,遇到了这样一个问题。 首先,我的前端是一个来自百度的开源框架——Amis,它封装自React.js,基于JSON配置。我下载了Amis提供的SDK文件夹,并进行了代码开发。但是我在部署整个系统的时候遇到了跨域问题。原因是,

    2024年01月20日
    浏览(56)
  • HBuilderX - uniapp - 运行项目到微信开发者工具 - 提示项目下缺少manifest.json文件

    1、有manifest.json的情况下报错,选中项目,右键菜单,重新识别项目类型,再次运行 参考文档: HBuilderX - 项目根目录下缺少manifest.json - 峻宇 - 博客园 2、HBuilderX 运行uniapp到微信开发者工具,提示工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启,

    2024年02月13日
    浏览(61)
  • 彻底理解前端安全面试题(3)—— CORS跨域资源共享,解决跨域问题,建议收藏(含源码)

    前端关于网络安全看似高深莫测,其实来来回回就那么点东西,我总结一下就是 3 + 1  = 4,3个用字母描述的【分别是 XSS、CSRF、CORS】 + 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略,其他的都是网络攻击。除了这 4 个前端相关的面试题,其他的都是一些不常

    2024年02月01日
    浏览(46)
  • 前端调用DRI后端API出现跨域资源共享(CORS)问题解决办法

    目录 1. 引言 2. 跨源资源共享和实现方法 3. 在Django项目中配置django-cors-headers库 Reference 在进行后端API开发时,有时会遇到“跨域资源共享 (CORS) 请求...被阻止“的错误,如图1所示。本文讲解如何在使用DRF(Django REST Framework)的后端API开发项目中解决这个问题。 A cross-origin re

    2024年04月25日
    浏览(51)
  • UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

    UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。 二选一即可。 修改或调整配置文件后,推荐重新运行,以防不生效。 配置完成后,请求接口

    2024年01月16日
    浏览(46)
  • 【Ajax】笔记-设置CORS响应头实现跨域

    CORS CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源 COR

    2024年02月14日
    浏览(39)
  • uniapp 自定义发行 动态修改 manifest.json

    这边需求是 : 根据不同的打包环境 设置不同的标题以及路径。方便各种调试。防止 每次 手动 每次修改 manifest.json 出错  uniapp 自定义发行: 添加自定义发行之后 Hbuilder 编辑器会自动多 出来 按钮 : 官方文档:概述 | uni-app官网 我这里的配置是这样: package.json 这里主要用于

    2024年02月11日
    浏览(85)
  • Chrome 跨域问题CORS 分析

    先叠个甲,有错误,望沟通指正! 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. 类似上面的报错 ,就是出现了跨域限制访问问题 同源策略(Same-Origin Policy),这个是浏览器的一个策略.也就

    2024年03月18日
    浏览(33)
  • axios请求解决跨域问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is

    我们在Vue实现axios请求时,出现跨域问题,我们有两种解决方案(当然我们的请求路径和axios都是没问题的)    第一种加上CrossOrigin注解 第二种写一个config配置类 希望能帮到各位,

    2024年02月12日
    浏览(47)
  • flask解决cors跨域请求

    CORS的全称是Cross-Origin Resource Sharing  ,有w3c组织制定的,现在这个规范,已经被大多数浏览器支持,处理跨域的需求。 CORS需要后端应用进行配置,因此,这是一种后端跨域的配置方式,这种方式很容易理解,一个陌生的请求来访问你的服务器,自然需要进行授权。。。 (关

    2024年02月12日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包