uniapp处理h5跨域

一、问题描述

在开发App的时候，经常会遇到如下问题

二、什么是跨域

同源策略

• 是浏览器安全策略
• 协议号、域名、端口号必须完全一致

跨域

• 违背同源策略就会产生跨域

解决跨域的方法

• Jsonp
• cors
• 服务器去代理

三、uniapp如何解决跨域问题

在manifest.json文件中添加如下内容

• target：请求的地址
• /apis: 自定义的名称，请求的时候会用到

// h5端跨域配置
	"h5": {
		"devServer": {
			"proxy": {
				"/apis": {
					"target": "http://114.218.158.78:9911",
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
						"^/apis": ""
					}
				}
			},
			"https": false,
			"port": 9911
		}
	}

四、使用

• 处理h5请求
• /apis ： 会被处理转发

// url处理
let url = ''
// #ifdef H5
url = '/apis' + params.url
// #endif
// #ifdef APP-PLUS
url = baseUrl + params.url
// #endif

// request
header = {
    "Content-Type": params.contentType || 'application/json',
}

wx.request({
    url: url,
    data: params,
    method: params.methods || 'POST',
    header,
    success: function(res) {},
    fail: function(err) {},
    complete() {}
})