如何处理JS跨域问题

跨域

当两个域名地址的协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域间相互请求资源,即为“跨域”。

禁止跨域

出于安全方面的考虑,Javascript使用同源策略,不允许跨域调用其它页面的对象。

解决办法

1. 代理

在同域名的web服务器端创建一个代理。
在A地的web服务器的后台调用B地服务器的服务,然后再把响应结果返回给前端,这样前端调用A地同域名的服务就和调用B地的服务效果相同了。

2. JSONP

JSONP可用于解决主流浏览器的跨域GET请求。
原理:
www.aaa.com中:

<script>
     function jsonp(json) {
        //do something
        alert(json["name"]);
    }
</script>
<script src="http://www.bbb.com/jsonp.js"></script>

www.bbb.com页面中:

jsonp({"name":"哪吒","age":7});

<script>标签可以跨域获取文件。
该方法不支持POST请求。

3. XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。
不支持IE10以下版本
方法:
在服务器端做一些改造:

header('Access-Control-Allow-Origin:*'); 
//符号*表示所有域都可以访问,也可以设为特定域名,即仅允许设定的域名访问。
header('Access-Control-Allow-Methods:POST,GET');

(完)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,268评论 19 139
  • 由于浏览器的同源策略保护机制,浏览器不能执行来自其他来源的脚本。通过js在不同的域之间进行数据传输或通信,比如用a...
    威少_吴阅读 1,430评论 0 2
  • 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的“跨域问题”。作为前端开发,解决跨域...
    SCQ000阅读 2,624评论 1 52
  • 跨域失败 当使用jsonp跨域时, 1:请求必须是GET 2:python 写的webservice返回的格式是J...
    旅行家John阅读 486评论 0 1
  • 我们常常受人管制,同时到了一定的职业阶段有可能还会去管理别人。作为管理者,每个人的职业经历和遇到的管理风格不同,因...
    万里鹏翼2017阅读 316评论 0 0