uniapp跨域设置

HYQ_java

已于 2022-06-23 10:06:24 修改

阅读量4w

点赞数 17

分类专栏：前端 uni-app 文章标签： html5 uni-app

于 2021-09-07 15:05:04 首次发布

本文链接：https://blog.csdn.net/HYQ_java/article/details/120157680

版权

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

uni-app

4 篇文章

订阅专栏

本文详细介绍了在前端开发中遇到的跨域问题及其原因，提供了两种解决方案：通过manifest.json配置跨域代理和创建vue.config.js文件设置代理。同时强调了开发环境与生产环境的区别，开发环境可以使用代理，而生产环境通常需要后端进行CORS设置。最后给出了PHP后端设置CORS的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在前后端开发过程中，请求接口时，出现跨域问题

二、跨域原因：

由于浏览器同源策略，即：端口号、域名、协议、IP地址必须一致，否则请求将被浏览器拦截。

三、跨域的解决方法

方法1.在manifest.json的代码视图中根节点中配置h5

如果需要也可以配置多个跨域地址

        "devServer" : {
            // "port" : 8080, //浏览器运行端口
            "https" : false,
            "proxy" : {
                "/baseUrlTest" : {
                    "target" : "http://192.168.1.34:8084",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/baseUrlTest" : ""
                    }
                },
                "/baseUrlBuild" : {
                    "target" : "http://zhbz-test.xxx.com",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/baseUrlBuild" : "" //路径重写，将接口路径中以/api开头的部分替换掉
                    }
                }
            }
        },

配置好跨域地址，我们如何使用呢

const BASE_URL = "baseUrlTest";	
const xxx = BASE_URL + "/api/tool/xxx",

方法2.在项目根目录下（即跟App.vue同级）建vue.config.js，这个文件会默认优先加载

module.exports = {
	devServer:{
		port:'8080',
		disableHostCheck:true,
		proxy:{
			'/dpc':{
				target:'http://XXXXX:9088',
				changeOrigin:true,
				pathRewrite:{
					'^/dpc': ''
				}
			}
		}
	}
}

四、开发环境和生产环境

有的小伙伴开发过程中配置了跨域，也能正常请求接口。当把代码上传服务器的时候，发现接口全都报错了。

这是因为生产环境不需要设置跨域代理，我们只需要把之前的接口路径修改成正确的地址就可以了。

如果生产环境出现跨域问题我们可以让后端进行跨域设置cors，php核心代码如下

'cors'=>[
  'Origin' => ['*'], // 允许跨域的请求源
  'Access-Control-Request-Method' => ['*'], // 接收的请求方法
  'Access-Control-Request-Headers' => ['*'], // 请求头接收类型
  'Access-Control-Allow-Credentials' => false,  // 是否允许请求携带 cookie，注意这里如果设置为true，则会报错 
  'Access-Control-Max-Age' => 3600 // 缓存，可不设置
]