uniapp跨域设置

原创 2022-06-23 10:06:24 4.1w 阅读 AI写同款

收录于

前端

uni-app

HYQ_java

码龄9年墨衍会员 · AI 创作全网分发

31粉丝40篇原创

关注

UniApp开发深度解析：跨域问题、路径配置与代理策略在开发 UniApp 项目的过程中，配置开发环境的路径一直是个容易踩坑的地方，比如设置、调试环境路径，以及为什么直接写不行却必须通过中的代理转发实现？这篇文章将通过代码实例和原理分析，深入讲解路径设计、开发与生产环境配置的逻辑，并解答为什么这些操作是必要的。UniApp 项目中，前端代码需要向后端发起请求获取数据。而开发和生产环境下的后端路径通常不同：直接在前端代码中写或是不行的，因为：在代码中看到的这段配置： 1. 开发环境 (development) H5 环境：：这里使阅读详情

AI摘要

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

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

二、跨域原因：

由于浏览器同源策略，即：端口号、域名、协议、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 // 缓存，可不设置
]

标签

#html5 #uni-app