javascript跨域的解决方案

首先我们得了解什么是跨域

我们来回顾一下一个域名地址的组成：

http://  www   abc.com  :8080   /script/jquery.js

协议      子域名  主域名      端口号   请求资源地址

当协议、子域名、主域名、端口号不同时，都算作不同域

不同域之间相互请求资源，就算做“跨域”

比如：http://www.abc.com/index.html 请求http://www.efg.com/server.php就算做跨域请求

 

跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。现在我们回到什么是跨域呢，简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.com下的对象

 特别注意两点：第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

处理跨域的方法 一、代理

通过在同域名的web服务器端创建一个代理：

a服务器

b服务器

我们可以在a服务器的后台来调用b服务器的服务，然后再把响应结果返回给a的前端，这样前端调用a同域名的服务就和调用b的服务效果相同了

 

处理跨域方法 二、JSOP

在ajax当中的  dataType当中 改成jsonp

加上一个属性  jsonp：“”  可以取任意一个值

后端代码的改造  在get请求处理中  获取到 jsonp里的内容  $jsonp = $_GET["jsonp"] 里面的值是参数的名称

要在json数据当中加上一个括号

原json数据$result='{"name":"k.luo"}'

改造后返回数据：$result=$jsonp.'({"name":"k.luo"})'   php语言

 

但是实现跨域知识实现了get请求的改造、jsonp只能对get请求取得效果，jsonp不支持post请求的

 

处理跨域方法 三、XHR2

HTML为我们提供了XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新的功能

IE10以下的版本都不支持

在服务器端加入头文件

header("Access-Control-Allow-Origin:*");  *为所有

header("Access-Control-Allow-Methods:POST,GET"); 请求方式

 

处理跨域方法 四、动态创建script

因为script标签不受同源策略的影响

 

function loadScript(url, func) {
  var head = document.head || document.getElementByTagName('head')[0];
  var script = document.createElement('script');
  script.src = url;

  script.onload = script.onreadystatechange = function(){
    if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
      func();
      script.onload = script.onreadystatechange = null;
    }
  };

  head.insertBefore(script, 0);
}
window.baidu = {
  sug: function(data){
    console.log(data);
  }
}
loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
//我们请求的内容在哪里？
//我们可以在chorme调试面板的source中看到script引入的内容