uni-app及vue浏览器跨域问题解决

Zachary46

发布于 2022-03-24 08:39:45

4020

发布于 2022-03-24 08:39:45

文章被收录于专栏：Zachary46Zachary46

以猫眼电影接口为例：

假设请求接口https://m.maoyan.com/ajax/movieOnInfoList遇到跨域问题

vue解决跨域

在项目根目录下新建vue.config.js文件，做如下配置

image.png

module.exports = {
    devServer: {
        proxy: {
            '/ajax': {
                target: "https://m.maoyan.com",
                changeOrigin: true
            }
        }
    }
}

在进行网络请求的时候请求路径不用拼接域名

fetch("/ajax/movieOnInfoList")
       .then(res=>res.json()).then(res=>{
        console.log(res)
      })

'/ajax'匹配到路径会自动在前面加入target配置的域名https://m.maoyan.com

uni-app解决跨域

在mainifest.json的源码视图里添加如下代码：

image.png

 "h5" : {
        "devServer" : {
            "proxy": {
                "/ajax":{
                    "target": "https://m.maoyan.com",
                    "changeOrigin": true
                }
            }
        }
    }

代码和vue配置差不多，唯一区别就是键值对要加""号

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022.02.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax