uniapp开发h5解决跨域问题

李佳俊414

于 2025-06-10 10:32:57 发布

阅读量554

点赞数 6

CC 4.0 BY-SA版权

文章标签： uni-app javascript 开发语言

本文链接：https://blog.csdn.net/lijiajun98/article/details/148555208

背景：前端的域名是https开头，后端的的资源域名是http,在浏览器中不同源，会产生跨域问题，请求不到资源，使用配置代理绕过同源协议

1、app.vue同级创建vue.config文件，在manifest.json文件下的源码视图里也配置代理文件

两个文件必须同时配置，否则不生效

如下代码事例，是代理了两个域名，如果还有第三个，继续在proxy对象下，继续添加

创建一个vue.config文件

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://192.168.1.1111:1111",  //你的地址
        changeOrigin: true,
        secure: false,
        // 添加路径重写规则
        pathRewrite: {
          "^/api": "", // 根据后端接口路径决定是否重写
        },
        
      },
	  "/fileapi": {
	    target: "http://192.168.1.1111:1112",
	    changeOrigin: true,
	    secure: false,
	    // 添加路径重写规则
	    pathRewrite: {
	      "^/fileapi": "", // 根据后端接口路径决定是否重写
	    },
        
        
	  },
    },
  },
};

在manifest.json文件下的源码视图里也要添加

"h5": {
		"devServer": {
			"https": true,
			"port": 8081,
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "http://192.168.1.1111:1111",
					"changeOrigin": true,
					"secure": false,
					// 添加路径重写规则
					"pathRewrite": {
						"^/api": "" // 根据后端接口路径决定是否重写
					}
				},
				"/fileapi": {
					"target": "http://192.168.1.1111:1112",
					"changeOrigin": true,
					"secure": false,
					// 添加路径重写规则
					"pathRewrite": {
						"^/flieapi": "" // 根据后端接口路径决定是否重写
					}
				}
			}

		}
	},

2、怎么使用配置代理

看你需要使用哪个代理，在你的接口名称前加上，如下图，一个使用了/api 的代理，一个使用了/fileapi代理

export  function login(data){ 
	return request({
		url:'/api/GetSign',
		method: 'post',
		data
	})
}



export  function GetSampleStyleList(data){ 
	return request({
		url:'/fileapi/GetSampleStyleList',
		method: 'post',
		data
	})
}