解决前端调试接口,跨域环境

一、介绍

其实跨域是浏览器本身限制阻止的,为什么就是因为超级不安全

前端和后台调试接口时,最主要的麻烦就是跨域导致的,怎么解决,提供以下几种方法

 

二、方法

1、CORS的全称是"跨域资源共享",后端在接口文件写一段(这是最简单方法,但是)

1 // 指定允许其他域名访问  
2 header('Access-Control-Allow-Origin:*');  

优点:对于前端来说十分之简单,完全不用理会,直接请求

缺点:不安全,所以在每次发布上线时都要删除这一段,有些麻烦

结论:适合在开发阶段,不适用于已经要经常更新版本迭代

2、使用jsonp

原理:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了

优点:兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果

缺点:只支持GET请求而不支持POST等其它类型的HTTP请求

3、用fiddler+willow替换重定向到本地文件

怎么使用看以看一下这篇文章url:http://blog.csdn.net/mevicky/article/details/50285381

download:http://qzonetouch.github.io/commonWidget/willow

优点:十分的方便可以时时的看到本地代码在网上的效果,能脱离开发环境却不影响线上调试

缺点:会抓取一大堆的包,所有请求都会被抓,会卡???

4、浏览器跨域设置

谷歌浏览器设置成支持跨域的模式(还是对应上了原来那句话跨域不安全,是浏览器阻止不同域之间的请求)

设置url:http://www.cnblogs.com/laden666666/p/5544572.html

优点:一个浏览器能解决,别说多方便。

缺点:暂时木有

 

感恩节~~~大吉大利,今晚吃鸡

/*************20190820-add****************************************************************************/

 5. 使用node代理

原理:在发送请求的时候做拦截,增加一个中间件,做代理转发,实现中间件和发送请求的页面同源非跨域

优点:看起来高大上一点有level一点

缺点:一旦页面有多个请求不同地址就要做多个拦截

 

/*************20190904-add****************************************************************************/

6. document.domain

今天看一篇文章才发现还有一种解决跨域方法,不过有很大的局限性

使用document.domain赋值解决额

只能赋成当前的域名或者基础域名

 

/*************20220318-add****************************************************************************/

 

7. WebSocket

8. Nginx

其实和node差不多,性能ng更好,但是node可以做到请求合并以及请求处理

9. postMessage

用于iframe

 

 

转载请注明出处http://www.cnblogs.com/matthew9298-Begin20160224/

posted @ 2017-05-19 19:16  to_Matthew  阅读(862)  评论(0编辑  收藏  举报