统计
  • 建站日期:2019-12-01
  • 文章总数:1760 篇
  • 评论总数:2007 条
  • 分类总数:21 个
  • 最后更新:7月24日
文章 未分类

uniapp使用uni.request()API发起接口请求时:因受到CORS(浏览器同源策略影响)出现跨域Access-Control-Allow-Origin的问题解决方案

程序员阿鑫
首页 未分类 正文
官方推荐

首先需明确uni.request不支持使用 jsonp 方案去解决跨域问题。

最直接的解决办法就是:在uni-app 的项目中找到manifest.json这个配置文件,在该配置文件中配置跨域代理(代理服务器)

解决方案如下:


uniapp使用uni.request()API发起接口请求时:因受到CORS(浏览器同源策略影响)出现跨域Access-Control-Allow-Origin的问题解决方案
-程序员阿鑫-带你一起秃头
-第1
张图片
选择源码视图对manifest.json配置文件进行编辑:增加这块内容

    "h5": {
        "devServer": {
            "proxy": {//配置代理服务器来解决跨域问题,uniapp不适用CORS方案和设置JSONP方案
                "/api/": { //映射域名
                    "target": "http://localhost:3000",
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }

完整视图代码:

{
    "name": "wx-MiniPro",
    "appid": "__UNI__06A0CD9",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    /* 5+App特有相关 */
    "app-plus": {
        "usingComponents": true,
        "nvueStyleCompiler": "uni-app",
        "compilerVersion": 3,
        "splashscreen": {
            "alwaysShowBeforeRender": true,
            "waiting": true,
            "autoclose": true,
            "delay": 0
        },
        /* 模块配置 */
        "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.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.ACCESS_NETWORK_STATE"/>",
                    "<uses-permission android:name="android.permission.CAMERA"/>",
                    "<uses-permission android:name="android.permission.GET_ACCOUNTS"/>",
                    "<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.FLASHLIGHT"/>",
                    "<uses-feature android:name="android.hardware.camera"/>",
                    "<uses-permission android:name="android.permission.WRITE_SETTINGS"/>"
                ]
            },
            /* ios打包配置 */
            "ios": {},
            /* SDK配置 */
            "sdkConfigs": {}
        }
    },
    /* 快应用特有相关 */
    "quickapp": {},
    /* 小程序特有相关 */
    "mp-weixin": {
        "appid": "",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true
    },
    "mp-alipay": {
        "usingComponents": true
    },
    "mp-baidu": {
        "usingComponents": true
    },
    "mp-toutiao": {
        "usingComponents": true
    },
    "uniStatistics": {
        "enable": false
    },
    "h5": {
        "devServer": {
            "proxy": {//配置代理服务器来解决跨域问题,uniapp不适用CORS方案和设置JSONP方案
                "/api/": {//映射域名
                    "target": "http://localhost:3000",
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }
}

重启项目,当前端再次发起uni.request()接口请求时,不再受浏览器同源策略CORS的影响,也不再需要配置请求头:Access-Control-Allow-Origin

uni.request({
    url: '/api/retroaction',
    method: 'POST',
    data: {},
    success: res => {console.log(JSON.stringify(res))},
    fail: () => {},
    complete: () => {}
});

另外

跨域问题只出现在H5上,小程序和APP端不存在跨域问题

如果,这样还解决不了跨域问题
那么就....


uniapp使用uni.request()API发起接口请求时:因受到CORS(浏览器同源策略影响)出现跨域Access-Control-Allow-Origin的问题解决方案
-程序员阿鑫-带你一起秃头
-第2
张图片

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2022-6-14,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
自己动手给网站增加一个夜间模式
« 上一篇
Google AdSense美国税务信息W-8BEN怎么填写,填写的教程操作方法
下一篇 »

发表评论