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等浏览器的跨域查询问题。
相关文章
