uni-app 跨域

一、出现问题

在uni.app 中发起请求是出现该问题;

因为这个同源策略,可以保护网站的接口不用随便被别人调用,在浏览器的层面及时拦截,在一定程度上起来保护作用。

那什么样的请求算是跨域请求?

本身的url和请求的接口需要同时满足以下:

  • 端口一致;
  • 协议一致;
  • 域名一致;

这样就不是跨域请求。只要你不符合上面任何一条,那么你这个请求就是跨域请求,浏览器就会拦截报错。

但是我们有时候页面部署在一台服务器,接口在另外一台服务器,这样就不能满足上面的规则,该怎么解决这种正常的业务需求,防止被浏览器拦截呢?

cors

这个会用的比较多,跨域资源共享, 全称 Cross-origin resource sharing,这是一个W3C标准,浏览器访问到你的接口已经开启了cors,并且你的url是在许可内,则浏览器不会拦截,允许访问。

配置字段:

'Access-Control-Allow-Origin': '*', // 支持的域名, *代表任意域名都可以访问 'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type' // 支持的header 'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS', //支持的请求方式

二、官方文档

uni-app官网

uni-app 跨域_第1张图片

三、解决方式

1、通过HBuilder 修改:也可以通过其他IDE进行修改,修改完重新运行即可

uni-app 跨域_第2张图片

 uni-app 跨域_第3张图片

uni-app 跨域_第4张图片

 源码中会生成h5 的部分内容;如果需要跨域那么自行添加;

	"h5": {
		"title": "H5",
		"devServer": {
			"port": 8080,
			"https": false,
			"disableHostCheck": true,
			"proxy": {
				"/app": { //app是需要转发的请求(所有带有 /app 前缀的请求都会转发给 target 后的地址(代理1)
					"target": "http://127.0.0.1:8001", // 你的目标接口域名
					"changeOrigin": true, // 开启代理
					"secure": true, //
					"pathRewrite": { //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
						"^/app": ""
					}
				},
				"/api": { //api是需要转发的请求(所有带有 /api 前缀的请求都会转发给 target 后的地址 (代理2)
					"target": "http://127.0.0.1:8001", // 你的目标接口域名
					"changeOrigin": true, // 开启代理
					"secure": true, //
					"pathRewrite": { //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
						"^/api": ""
					}
				}
			}
		},
		"router": {
			"base": "./"
		}
	}

 发起请求时:

uni-app 跨域_第5张图片

uni-app 跨域_第6张图片

 

注意:

如果使用 @escook/request-miniprogram  发起请求时需要注意,请求根路劲;加入了代理就  不用在配置根路径;但是在 小程序   中还是需要使用功能到 根路径,根据自己的项目来确定是否需要增加跨域处理

uni-app 跨域_第7张图片

安装配置  @escook/request-miniprogram

@escook/request-miniprogram - npm

四、小结

在项目的 manifest.json 文件中  增加 h5 的配置;

配置内容如下:

"h5": {
		"title": "H5",
		"devServer": {
			"port": 8080,
			"https": false,
			"disableHostCheck": true,
			"proxy": {
				"/app": { //app是需要转发的请求(所有带有 /app 前缀的请求都会转发给 target 后的地址(代理1)
					"target": "http://127.0.0.1:8001", // 你的目标接口域名
					"changeOrigin": true, // 开启代理
					"secure": true, //
					"pathRewrite": { //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
						"^/app": ""
					}
				}
			}
		}
	}

H5:在发起请求的地方就 不用在增加 请求跟路劲;

小程序:如果是小程序就需要增加根路径

你可能感兴趣的:(uni-app)