欢迎光临建站系统网站,我们的服务范围是一键建站,公司建站等。

建站系统

一个高端新的网络集成营销平台

uni-app之H5端跨域问题解决方案

作者:jcmp      发布时间:2021-04-26      浏览量:0
一、1. 什么是跨域跨域指浏览器不能执行

一、1. 什么是跨域

跨域指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的(目前所有的浏览器都实行同源策略),是浏览器对javascript施加的安全限制。

A站点 B站点 分析 是否跨域 http://www.123.com/index.html http://www.123.com/server.php 同源 否 http://www.123.com/index.html https://www.123.com/server.php 协议不同(http/https) 是 http://www.123.com/server.php http://www.456.com/server.php 主域名不同(123/456) 是 http://abc.123.com/index.htm http://def.123.com/server.php 子域名不同(abc/def) 是 http://www.123.com:8080/index.html http://www.123.com:8081/server.php 端口不同(8080/8081) 是。

注意 :localhost和127.0.0.1虽然都指向本机,但也属于跨域;域名和域名对应的ip也属于跨域。

二、2. 部署时的跨域解决方案

(1) 方案1:最直接的,当然还是将前端代码和后端接口部署在同域的web服务器上。 (2) 方案2:由后台服务器配置策略,设为允许跨域访问。 Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。即在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息:

三、3. 调试时的跨域解决方案

3.1 使用HBuilderX内置浏览器

内置浏览器:经过官方处理,不存在跨域问题,简单易用,推荐使用(需HBuilderX 2.6以上)。 使用:在打开页面后,点HBuilderX右上角的预览,即可打开内部浏览器;或者在运行菜单里选择运行到内置浏览器也可以。

3.2 配置webpack-dev-server代理

参考: 配置指南

3.3 给浏览器安装跨域插件

(1) 当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:

最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用ajax访问远程服务器的内容时就会请求失败,比如:本地预览的地址是: http://localhost:8080/ ,访问的接口地址是 http://dcloud.io/api 。 (2) 如果仅仅是为了本地预览,可以使用Chrome浏览器插件 Allow-Control-Allow-Origin: * 来协助调试。

(3) 插件安装方式

(4) 若使用插件后跨域问题依旧存在。

四、5. 其他

如果资源是html页面,可通过如下设置 解决跨域问题