精华内容
下载资源
问答
  • 关于本地调试Ajax产生的问题及引发的思考AjaxAjax是什么Ajax干什么Ajax流程Ajax代码实现Ajax问题之一——打开chrome浏览器访问页面,报错:Cross origin requests are only supported for protocol schemes: http, ...

    Ajax

    Ajax(Asynchronous JavaScript + XML),直译过来就是异步 JavaScript和XML。

    Ajax是什么

    是一种无需刷新页面就能够从服务器取得数据的一种方法。

    Ajax干什么

    Web的运作原理:一次HTTP请求对应一个页面。
    如果没有Ajax,一次HTTP请求从服务器端读取了文件或数据后,再将获取的数据写进html里,需要整个页面刷新,出现浪费资源、网络不好的情况下会影响用户体验等一系列问题。Ajax的运用,可以使页面在需要的时候局部刷新,让用户仍然停留在当前页面,其实局部已经发送了HTTP请求并获得了数据再来进行更新。最直观的感受就是——提高用户体验。

    参考:阮一峰——Ajax
    参考书籍:《JavaScript高级程序设计(第三版)》

    Ajax流程

    1. 创建Ajax对象
    2. 连接服务器
    3. 发送请求
    4. 接收相应结果

    负责Ajax运作的核心对象是XMLHttpRequest(XHR)对象,在较低版本(主要是:IE6-IE9等),采用的是ActiveXObject对象实现的。

    查询各方法在不同浏览器的不同版本的兼容程度

    Ajax代码实现

    		var getbtn = document.getElementById("getAjax");
            getbtn.onclick = function () {
                var ajax;
                if (window.XMLHttpRequest) {
                    ajax = new XMLHttpRequest();
                    //1-1、普通版本的创建Ajax对象
                } else {
                    ajax = new ActiveXObject('Microsoft.XMLHTTP');
                    //1-2、低版本的创建Ajax对象
                }
                ajax.open('GET', './Ajax.txt', true);
                //2、连接服务器,open方法接收三个参数:请求类型,url,是否异步的Boolean
                ajax.send(null);
                //3、发送请求,如果无数据请求,一定要写null
                ajax.onreadystatechange = function () {
                    if ( ajax.readyStatus == 4 && ajax.status == 200) {
                    /*
                    一、ajax对象的readyStatus属性值为0到4,
                    分别对应不同ajax请求中的状态,4代表过程结束,
                    但不一定是请求成功的。
                    二、ajax对象的status属性值代表着请求的结果,相应HTTP的状态,
                    可以将“200”作为请求成功的标志,其余均有各自代表的意思。
    				*/
                        console.log(ajax.responseText);
                       /*
                       ajax对象的responseText属性表示作为相应主体被返回的文本。
    					*/
                    }else{
                        alert("error");
                    }
                };
                
            }
    

    Ajax问题之一——打开chrome浏览器访问页面,报错:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.(大致意思是:Cross origin请求只支持的协议有:http,data, chrome, chrome-extension, https.)

    这是一个本地调试中跨域的错误
    当我们点击报错信息里的页面的时候,发现是可以访问到这个文件信息的。
    在这里插入图片描述
    我猜测,大概率是访问地址的file这部分有点错误吧。下面进行验证:
    在这里插入图片描述
    我们发现ajax.html的window.location属性中有我们熟悉的字眼——protocol,并且显示的是“file:”,与报错信息的内容基本上吻合。
    说明chrome浏览器不支持file协议。

    解决方法:

    1. 如果换成Firefox浏览器,就能够正常运行。
    2. 采用虚拟机运行html文件,模拟环境,用localhost访问即可,此时的protocol:“http:” 在这里插入图片描述
    3. 配置chrome,使其支持file协议。
      设置Chrome的快捷方式的属性,在“目标”后面加上–allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。

    问题之二——如果open()中的url访问的是一个绝对路径,就会报错,报错信息如下:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.(浏览器的跨域行为违反了安全)

    在这里插入图片描述

    跨域

    初始网站:http://store.company.com/dir/page.html
    测试结果如下:

    URL 结果 原因
    http://store.company.com/dir2/other.html 成功
    http://store.company.com/dir/inner/another.html 成功
    https://store.company.com/secure.html 失败 不同协议 ( https和http )
    http://store.company.com:81/dir/etc.html 失败 不同端口(80和81)
    http://news.company.com/dir/other.html 失败 不同域名(news和store)

    后三种情况均为——跨域。

    参考:MDN——跨域

    为什么会跨域

    1. 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的
    2. 基于浏览器的同源策略限制,限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个出于安全的策略,用于隔离潜在恶意文件的重要安全机制。

    跨域在本案例的体现

    源地址:file:///G:/xmapp/htdocs/ajax/ajax.html
    需要访问:http://www.baidu.com

    且不说端口,协议与域名均跨域了。

    跨域的解决措施

    推荐阅读:解决跨域的措施(比较齐全)
    在开发环境等有些情况限制下,可以通过配置chrome浏览器,解决本地跨域问题。

    Ajax问题之三——(采用配置chrome达解决本地跨域问题)能够读取文件,但是ajax对象实例的status=0?

    ajax.onreadystatechange = function (res) {
                    console.log("ajax.status="+ajax.status)
                    if ( ajax.readyStatus == 4 && ajax.status == 200) {
                        console.log(ajax.responseText);
                    }else{
                        alert("error")
                    }
                };
    

    在这里插入图片描述在这里插入图片描述
    可以读取文件,并打印了此时ajax.status的值。
    因为status=0,故没有实现预设的读取成功(status=200)的代码行。

    Ajax.status

    Ajax对象中有一个属性——status。
    status是响应HTTP请求后,后台返回的状态值。
    Ajax本该在服务器端进行数据的获取,而现在是在本地file协议上固然不支持,所以返回0。
    用虚拟机模拟环境,访问localhost/ajax/ajax.html,即是以HTTP协议来访问的,故有返回的status值。
    采用虚拟机模拟环境后,访问服务器的协议变成了HTTP:
    在这里插入图片描述

    关于本例中Ajax的demo所引发的思考

    前端与后台的交互的方式

    1. HTML赋值
    2. JS赋值
    3. script填充JSON
    4. AJAX获取JSON
    5. WebSocket实时传输数据

    参考:前端与后台的数据交互常用方式汇总

    前后端的分离,使得前后端需要数据交互

    前后台分离的优点

    1. JavaScript可以做很大部分的数据处理工作,对服务器的压力减小。
    2. 后台错误不会直接反映到前台,较为友好。
    3. JavaScript强项在于控制整体的页面;后台的强项在于数据业务处理、维护平台的稳定性与性能等。各司其职,减少开发难度。
      推荐阅读:前后端分离开发的优缺点以及如何实现前后端分离开发

    文章为个人实践、整理的原创,借鉴之处均以注明,如有不足之处或错误之处,烦请指正,一起学习哟:)

    展开全文
  • 何为 内网 转 外网从名称 我们就可以 猜到大概的意思。...个人觉得原因有如下在我国的国情下面,基本都是内网IP,不像美国,个人家庭都是公网IP了购买公网IP就相当于要购买服务器,代价有点高本地调试

    何为 内网 转 外网

    从名称 我们就可以 猜到大概的意思。内网指的是我们的家庭网络(特指亚洲地区了),主要是我们亚洲地区公网IP不够每个家庭分配,所以就有了大的局域网内网。外|公网指的 可以直接被访问的网络

    为什么需要

     为什么会 有 “内网转外网的工具“的需求?个人觉得原因有如下

    • 在我国的国情下面,基本都是内网IP,不像美国,个人家庭都是公网IP了

    • 购买公网IP就相当于要购买服务器,代价有点高

    • 本地化调试:例如微信开发


    基于以上的情况,就有各位大大们发明的各种方法实现 将本地内网网络 转化 为 公网的方法


    作用

    目前比较常用的作用有以下几点

    1. 微信本地调试

    2. 远程演示:可以随时将本地的程序 给 别人看

    工具介绍

    NO.1 Ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放。

    我个人常用的是这个,用于微信开发调试,但是嘛最近不是那个二货搞了个带颜色的网站,导致提供免费服务的被微信封了,有时候哇,有好的免费工具就好好珍惜,某些个别人真是那种杀千刀的。忘记抱怨,我们来看看这个工具如何使用,这个服务是免费的

    软件下载方式

    1. 链接: https://pan.baidu.com/s/1miLXRqo 密码: y4y8

    2. 加入QQ群群文件下载: ,QQ群:325264502 

    目录结构介绍

    ├── darwin_amd64    mac系统使用
    ├── linux_386    Linux 32位 使用
    ├── linux_amd64  Linux 64位 使用
    ├── windows_386  Windows 32位 使用
    ├── windows_amd64 Windows 64位 使用


    大家根据各自的系统选择使用


    600

    使用方式

    语法基本介绍


    ngrok -config=ngrok.cfg -subdomain guowei8888 80
    
    -subdomain guowei8888   guowei8888 表示 是你自定义的域名前缀,必须唯一的,建议以qq号码,邮箱用户名等
    
    80 表示 暴露的端口号 可以修改其他的 例如 81 8080


    Linux系统


    ./ngrok -config=ngrok.cfg -subdomain guowei8888 80


    如下图截图中的 域名 就可以被其他人访问的


    600


    Win系统


    ngrok -config=ngrok.cfg -subdomain guowei8888 80


    600


    600


    效果展示

    600

    NO.2 NATAPP

    NatApp其实和ngrok差不多,这两个我觉得用一个就行了,只是由于ngrok被使用的人很多,所以比较出名点,关于NatApp这里会比较麻烦点,我们来一步一步走

    注册

    大家进入 https://natapp.cn/  填写信息进行注册,这个网站如果要使用免费服务,需要实名认证(姓名和身份证)


    600

    600



    600


    下载客户端

    600


    使用方式

    免费购买隧道(需要实名认证,姓名和身份证,鉴于目前信息泄露非常严重,如果可以尽可能用Ngrok)


    600


    600


    600


    基本语法

     natapp -authtoken=xxx
     
     authtoken 在购买隧道之后可以查看


    Linux 系统

    chmod a+x natapp
    
    ./natapp -authtoken=xxxx


    600


    Win 系统


    natapp -authtoken=xxxx


    600


    600


    效果展示

    600




    No.3 花生壳

    花生壳算是一个比较老的怪咖了,已经存在很多年了,这个大家可以自行查阅资料


    总结

    关于内网 转外网的这种需求,建议尽量使用Ngrok,其实选择NatApp,最后无可奈何在选择花生壳 


    本人关于 Yii2打造后台+微信全栈图书商城 就有使用 Ngrok 来调试微信开发

    参考网站


    原文地址:Ngrok NatApp 微信本地化调试利器
    标签:ngrok   natapp   花生壳   内网   外网   微信   本地调试   

    智能推荐

    展开全文
  • 如图所示:重点已经圈起来了,找度娘问了一下,这个报错的意思就是跨域,关于什么是跨域大家自行百度吧,这里就不解释了。下面直接说解决方案: 我这里使用的是:nginx(官网下载吧) 主要进行三方面设置: 1、前端...

    最近在使用VUE做前后端分离的项目,页面代码开发好了,连接后台获取数据的时候发现怎么都调不到后台接口,页面F12的信息如下:
    在这里插入图片描述
    如图所示:重点已经圈起来了 (Access-Control-Allow-Origin ),找度娘问了一下,这个报错的意思就是跨域,关于什么是跨域大家自行百度吧,这里就不解释了。下面直接说解决方案:

    我这里使用的是:nginx(官网下载吧
    主要进行两方面配置:
    1、前端配置(我用的是VUE):
    前端项目原来写法(直接写后台项目的访问地址):
    在这里插入图片描述
    使用Nginx后的写法:
    在这里插入图片描述
    为什么这么写我后面再做解释。
    2、nginx配置
    官网下载的nginx解压后结构如下:
    在这里插入图片描述
    打开conf路径下的nginx.conf(刚开始使用如果英文不太好建议把注释掉的没用的信息删除掉)
    精简后的nginx.conf内容如下:
    在这里插入图片描述
    这里稍微插一下nginx解决跨域的原理:
    不用nginx之前,我们的前端项目直接访问后台项目,然后报跨域;
    用nginx之后,我们的前端项目不直接访问后台项目了,转去访问nginx,由nginx代替前端项目去访问后台,后台项目返回的结果也由nginx去转交给前端项目,也就是前后端项目不见面了,由nginx在前后端项目中间调度。

    我们主要关注server模块的内容:

    这里我们跳过第一部分,先说第二部分的内容:

    		#第二部分
    		location /s-server {
    			proxy_pass http://127.0.0.1:52460/;	    #转换的后台接口
    		}
    

    这个配置的作用是,当nginx发现请求中存在字符串“/s-server”的时候就把它替换成“http://127.0.0.1:52460/”
    到这里大家就应该明白前面在前端项目中如下写的这行代码的作用了:

    var URLCommonPrefix = "/s-server";
    var URL = {
        login: URLCommonPrefix + 'checkUserAndPass/checkUserAndPass',
        }
    

    我在前端所有的接口前面拼接了“/s-server”,目的就是在nginx中把它替换成真正的后台地址。

    再来看第三部分:

    		#第三部分
    		location / {
    			proxy_pass http://127.0.0.1:8081/;	    #转换的前端接口
    		}
    

    这个配置的作用是:
    就我当前项目而言,所有不包含“/s-erver”字符串的请求都会被nginx转换成前端页面的跳转链接。

    现在把配置好的前端项目、后台项目和nginx启动起来:
    ①nginx启动,双击解压根目录下的nginx.exe文件,会有黑框一闪而过,这时nginx就已经启动起来了,不必多次双击
    ②后台项目启动,我用的.net,vs正常启动
    ③前端项目,我用的VUE,在VScode终端窗口输入命令:cnpm run dev 回车
    VUE启动后会提示如下:
    在这里插入图片描述
    这时我们使用前端项目启动后提示的链接(http://127.0.0.1:8081)访问项目:
    在这里插入图片描述
    what?
    还是这个错误,别着急,是时候解释nginx.conf文件中我们选中的第一部分配置的作用了,:

    		#第一部分
    		listen	8088;
    		server_name 127.0.0.1:8088;                 #侦听的端口号
    

    我们既然选择了使用nginx解决跨域问题,那么我们访问项目的时候就需要注意了,前端项目(VUE)使用命令run起来以后提示的访问链接我们就不能使用了,否则还会出现跨域,因为这样等于nginx配好了但是我们没用。要想解决问题,我们要使用在nginx.conf中配置的侦听端口链接访问。现在试试:访问http://127.0.0.1:8088
    在这里插入图片描述
    结束

    如有错误,请指摘,谢谢。

    展开全文
  • ngrok是什么意思? ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。Ngrok是外国发布的一个开源项目,也有一个公开的运行服务,但被国内墙掉了。国内一个机构建立并运营了...

    ngrok 是一个用 go 语言编写的反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。 ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放。

    ngrok是什么意思?

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。Ngrok是外国发布的一个开源项目,也有一个公开的运行服务,但被国内墙掉了。国内一个机构建立并运营了一个ngrok运行服务,虽然有时不太稳定,但对于调试人员来说是足够的。地址:http://www.ngrok.cc/ 。其支持HTTP的80端口和TCP端口转发。下面介绍使用方法。微信开发调试即需要一个公网IP/域名和80端口。

    如何通过Ngrok实现内网穿透

    如果以我们开发人员的机子作为服务端,有开发环境,又有tomcat,数据库等等,如果能够直接将机子这个内网的IP映射到公网多好啊。这就是我们将要介绍的内网穿透利器,而且是免费的!!

    1.Ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。Ngrok是外国发布的一个开源项目,也有一个公开的运行服务,但被国内墙掉了。国内一个机构建立并运营了一个ngrok运行服务,虽然有时不太稳定,但对于调试人员来说是足够的。地址:http://www.ngrok.cc/ 。其支持HTTP的80端口和TCP端口转发。下面介绍使用方法。微信开发调试即需要一个公网IP/域名和80端口。

    1) 注册登陆ngrok平台,申请一个ngrok.cc下的二级域名,并在基本信息里面获得token值。

    内网穿透--ngrok和花生壳

    2) 下载ngrok客户端并运行,输入token值即可。非常简单。这样本机就可以作为一个web服务器啦。

    3) 将http://www.emlinuxhome.ngrok.cc/ 填入微信公众号的服务器配置里面,可以立刻开始微信web调试。当然,微信也提供了一个web调试工具,但是要装QQ浏览器,调试H5方便些,其他就无所谓啦。

    2.花生壳

    Ngrok有时不稳定,用了一段时间,似乎二级域名会被锁住,一直免费确实很难运维,最好就是大家捐赠些给它。

    花生壳也是内网穿透利器,但是是收费的。最近有个免费版本是提供免费的1G流量。官网是:http://hsk.oray.com/

    使用方法跟ngrok差不多,也是通过web管理中心注册二级域名和配置,并通过花生壳的客户端来反向代理,实现内网穿透。花生壳在国内物联网领域广泛使用,例如视频监控等等。

    3.数据流向

    很容易想象公网数据交互过程:用户web访问二级域名->ngrok/花生壳一级域名转发数据->本地内网客户端接收到数据。

    花生壳的使用提高的不仅仅是办公效率,也会让客户拥有其他多方面更好的体验。花生壳所提供的服务器系统下载、映射等功能,也都会比较切合的体验客户的实际操作需求,最大化满足客户。

    转载:https://hsk.oray.com/news/11031.html

    展开全文
  • Idea远程调试代码

    2021-03-10 16:49:24
    1.首先说一下远程调试什么意思,简单点说,就是你在服务器上部署了一个项目,我这里是通过 java -jar启动的一个jar包,可能在运行的时候报错了,然后我想打debug,那么就是请求服务器上的服务,如果你在idea中打了...
  • 通过网络调试android

    千次阅读 2010-03-03 11:25:00
    从官方源码编译的,默认就带了那么几个软件,玩起来没什么意思。于是想办法装几个软件玩玩。这才想起来平时用的android sdk中自带的adb只能用于本地连接(默认通过回环与模拟器连接,或者通过usb与设备连接)。可是...
  • 搭建本地环境教程

    2015-03-08 12:49:32
    大家好,我是114啦助手,这次教大家搭建本地Apache+PHP+Mysql这个环境,方便大家调试 114啦程序,当然有了这个环境你也可以在本地安装PHP这样的论坛,像PHPWIND这样的论坛。和调试其它东西。 下面开始,这个软件叫...
  • 鼓捣了半天,终于成功了,j3d是sun的官方扩充包,...不过我对企业什么的很没兴趣,而且还发现了一个IBM的IFRAME包,不是html里的里的标签的意思,是一个基于swing的UI框架,可以设计出比较复杂的UI,效果还不错,透明框
  • 但是,在使用云函数本地调试的时候,又能正确的调用。 那么整个错误到底是什么意思,又是为什么会触发这个错误呢? 寻找问题原因 云函数的代码如下: 这样写的目的是我想通过不同的action来调用不同的云函数,节省...
  • adb常用命令大全

    2020-05-30 11:50:07
        adb的全称为Android Debug Bridge,就是Android调试桥的意思。通过adb我们可以在windows cmd终端中操作Android系统,查看系统状态,以及安装卸载软件,运行shell命令等。 二、adb常用命令 adb devices :...
  • 但是无论是什么编辑器(包括我最爱的WebStorm),都不能直接运行ts代码,这给本地调试带来了很大的不便。 应该很多人知道vscode有个叫code runner的插件,可以很方便地去运行代码,然后他给的办法是去装一个ts-node...
  • 1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。 Fiddler是以代理服务器的方式,监听...
  • fidder 使用教程

    2016-06-21 18:06:00
    1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。 Fiddler是以代理服务器的方式,监听...
  • Fiddler使用技巧

    千次阅读 2013-05-23 21:28:15
    1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。 Fiddler是以代理服务器的...
  • 总结2:npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)。意思...
  • 1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。 Fiddler是以代理服务器的方式,监听...
  • 1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。 Fiddler是以代理服务器的方式,监听...
  • 调试的时候发现问题就在这儿,然后还绕了几圈才搜对关键词。原来这属于访问第三方文件了,然而浏览器为了安全,默认不允许访问第三方文件的,哪怕这个文件在本地。具体原理跟安全知识有关,感兴趣的多查查。 跨域...
  • 登陆后,点开左侧导航的网站常规管理,分别修改网站设置里和导航管理两个地方 ,把http://localhost 改成你自己的域名,本地调试的就不用改 (此处没修改好,就要旺旺来问我为什么栏目导航打不开的请耐心设置) ...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

本地调试什么意思