uni-app跨域调试你学会了没

文章中心4个月前发布 admin
24 0 0

Uni-App跨域调试你学会了吗?

跨域介绍

跨源资源共享标准添加了一组新的HTTP标头字段,允许服务器声明允许哪些源站点通过浏览器访问哪些资源。另外,规范要求对于可能对服务器数据产生副作用的HTTP请求方法(尤其是除某些MIME类型的GET或POST请求之外的HTTP请求),浏览器必须首先使用OPTIONS方法发起预检请求。(preflightrequest)来查明服务器是否允许跨域请求。一旦服务器确认授权,它就会发起实际的HTTP请求。当返回预检请求时,服务器还可以告诉客户端是否应该携带任何凭证(包括cookie和HTTP认证相关数据)。

失败的CORS请求将生成错误,但出于安全原因,无法确切知道JavaScript代码中出了什么问题。您只能检查浏览器控制台来准确了解错误发生的位置。

下面的内容将讨论相关场景并分析该机制中涉及到的HTTP头字段。

多种访问控制场景

这里我们通过三个场景来说明跨域资源共享机制是如何工作的。这些示例都使用XMLHttpRequest对象。

简单的请求

有些请求不会触发CORS预检请求。本文将此类查询称为“简单查询”;请注意,该术语不是Fetch规范(定义CORS的地方)的一部分。如果满足以下所有条件,请求将被视为“简单请求”:

使用以下方法之一:

得到

工作

除了用户代理(例如Connection、User-Agent)自动设置的标头字段以及Fetch规范中定义为禁用标头名称的其他标头之外,可以手动定义的字段是CORS安全字段集。由Fetch规范定义的标头字段。整个事情是:

接受

接受语言

内容语言

内容类型(应注意其他限制)

Content-Type的值仅限于以下三个元素之一:

简单的文字

多部分/表单数据

应用程序/x-www-form-urlencoded

没有为请求中的XMLHttpRequest对象注册事件侦听器;XMLHttpRequest对象是使用XMLHttpRequest.upload属性访问的。

请求中未使用ReadableStream对象。

参考相关资料:

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

本地开发时,和用小程序IDE直接开发不同。在开发H5平台时,需要使用浏览器进行调试,浏览器会存在跨域问题。例如,当直接通过本地IP地址访问正在开发的页面,并且该页面调整了一些现有接口时,就会面临跨域问题。

调试时的跨域解决方案

前端工程师调试时,运行的前端代码是在uni-app自带的Web服务器上,而不是部署到后端企业服务器上。此时就会遇到跨域问题。除了协调后端的配置以允许跨域问题之外,您实际上可以自己解决跨域问题。

这里有两个选项供您选择

选项1使用HBuilderX内置浏览器

这个内置浏览器已经官方解决,不存在跨域问题。它简单易用,值得推荐。

打开页面后,点击HBuilderX右上角的预览,打开内部浏览器。或者您可以选择从“运行”菜单运行到内置浏览器

选项2:在manifest.json中添加代理配置

{

“h5”:{

“开发服务器”:{

“代理人”:{

“/api”:{

“目标”:“https://agent.diygw.com”,

“路径重写”:{

“^/api”:“”

}

}

}

}

}

}

我选择方案2是因为它更好地解决了GoogleChrome等浏览器的跨域查询问题。

© 版权声明

相关文章