解决uniapp调试过程中的请求跨域和环境配置

1. uniapp在前后台分离开发中,调试请求接口时,出现跨域问题。

 

2. 跨域原因:由于浏览器同源策略,即:端口号、域名、协议、IP地址必须一致,否则请求将被浏览器拦截。


3.  解决方法:服务器之间的请求无需遵循同源策略,则使用代理作为中间服务器,代理服务器向后台服务器请求数据,然后返回给浏览器。uniapp给我们提供了一个node.js的代理服务器,我们只需要按照配置即可。

"devServer": {
			"https" : false,
			"port": 8081,
			"disableHostCheck": true,
			"proxy": {
				 //这里的/api标记了以/api开头的接口需要使用此代理,会将下方的target拼接到接口的最前面
				"/api": {
					"target": "http://192.168.0.102:8085",//需要代理到的指定服务器
					"pathRewrite": {//路径重写,将接口路径中以/api开头的部分替换掉
						"^/api": ""
					}
				}
			}
		},

3. 生产环境与开发环境的配置:

原因:我们以/api来标记需要代理的接口,但我们只在开发环境中使用到代理,生产环境中不需要代理,因此我们需要区分生产环境和开发环境。在开发环境中,我们需要在被代理的接口前加上/api(与上方manifest.json中的代理配置名称一致)

 

const baseUrl = process.env.NODE_ENV === 'development' ? "/api/" : "/";
function Post(params){
	return new Promise(
	 (resolve, reject) =>{
		 uni.request({
		 	method: "POST",
		 	url: baseUrl + params.url,
		 	data: params.data,
		 	header: {
		 	  'Content-Type': 'application/json; charset=utf-8'
		 	},
		 	success: function (res) {
		 	  resolve(res)
		 	},
		 	fail: function (res) {
		 	  reject(res);
		 	}
		 })
	 }
	
	)
}
module.exports.Post = Post
exports.baseUrl = baseUrl

 

 

 

 

 

 

 

 

  • 10
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 uni-app 解决跨域请求的方法有以下几种: 1. 使用 jsonp 请求 2. 使用代理,在本地启动一个服务器来作为代理,发起跨域请求时以本地服务器为介,避免跨域的限制 3. 在服务器端配置跨域,如果服务器端允许跨域,则可以在服务器端设置 HTTP header,允许跨域访问。例如,在 Express.js 可以使用 cors 间件来实现。 如果你想深入了解跨域请求的原理,你可以参考以下资料: - 跨域资源共享 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS - HTTP 访问控制 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS - 跨域请求的简单请求与预检请求:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Simple_requests_and_preflight_requests ### 回答2: 在uni-app请求跨域解决方法有以下几种: 1. 使用uni.request方法发送请求时,在请求header添加"Access-Control-Allow-Origin"字段,允许指定的域名或通配符"*",例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', header: { "Access-Control-Allow-Origin": "*" }, success: function(res) { console.log(res.data); } }); ``` 2. 在uni-app的开发配置文件manifest.json,添加"networkTimeout"字段来配置跨域请求的超时时间,例如: ``` "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 } ``` 3. 使用uni.request方法发送请求时,设置withCredentials为true,开启跨域请求携带cookie功能。但需要注意服务器端也需要设置响应头允许接收cookie,例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', withCredentials: true, success: function(res) { console.log(res.data); } }); ``` 4. 在uni-app的开发配置文件manifest.json,添加"filters"字段配置全局过滤器来处理跨域请求,例如: ``` "filters": { "request": { "origin": "*", "x-requested-with": "*", "content-type": "application/json" } } ``` 以上是一些常用的uni-app处理cors跨域请求的方法,根据具体情况选择适合的解决方案。 ### 回答3: 在UniApp解决跨域问题可以通过配置服务器设置CORS(跨域资源共享)来实现。 首先,在后端服务器上设置CORS。在服务器返回响应时,需要在响应头添加相关的CORS头信息,允许前端跨域访问该接口。常见的CORS头信息包括:Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods等。具体配置方法可以根据后端服务器的不同而有所差异,请根据服务器文档进行设置。 其次,在UniApp发起请求时,需要在请求添加Origin字段表示请求的源地址。同时,UniApp默认会在请求自动添加Referer字段来表示访问来源,可根据需要进行调整。 另外,UniApp还提供了特定的API来设置请求的配置,可以通过修改uni.request方法的header参数或通过配置uni.request.defaults.header来添加请求头,以适应不同的CORS设置。 需要注意的是,前端涉及到跨域请求时,在接口上必须进行预检请求(Preflight Request)的检测,包括发送一个OPTIONS请求以校验服务器是否允许当前请求。 总结起来,解决UniApp的CORS跨域问题,需要在后端服务器进行相关CORS设置,并在UniApp添加请求头信息,确保请求能够正常跨域访问后端接口

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值