跨域的几种解决方法

什么是跨域？

跨域，不同域名之间的通信，就是跨域。如何区分是否是跨域呢，请看下面的例子。

以 http://www.a.com:8888 为例

@@@ 产生跨域的情况

@@ 一个网站的网址组成包括协议名，子域名，主域名，端口号

@一个网站的网址组成包括协议名，子域名，主域名，端口号。比如 https://github.com/ ，其中https是协议名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。

即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题

方案二 ———同主域，不同子域。

很简单，只要设置子域的域名指向父域就好。

例： http://s1.a.com http://a.com

修改http://s1.a.com 的域名指向 document.domain = "a.com";

方案一 ———通过JSONP跨域

1，所以 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入。非常巧合的一点（其实并不是），JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

你需要获取数据的页面 index.html:

<script> function getWeather(data) {

console .log(data);

}

</script>

<script src = "http://x.y.com/xx.js" >

http://x.y.com/xx.js 文件内容：

getWeather({ "城市" : "北京" , "天气" : "大雾" });

我们可以看到，在我们定义了 getWeather(data) 这个函数后，直接载入了 xx.js。

在这个脚本中，执行了 getWeather 函数，并传入了一个对象。然后我们在这个函数中将这个对象输出到 console 中。

这就是整个 JSONP 的流程。

2， jsonp是JSON with padding的简写，看起来与json差不多，但是包含在函数调用中的json，利用动态script元素来使用（具有src属性的如img,iframe,srcipt都不受同源策略的影响）。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果使用jquery，可以在type为get的时候dataType设为jsonp,就可以了。

$.ajax({

url: 'http://www.qdaily.com/get_user_and_radar.json?winWidth=1280&winHeight=800' ,

type : 'get' ,

dataType: 'jsonp' ,

data : {},

})

.done( function (data) {

console. log ( data . status );

})

看一个运行成功的实例：

$.ajax({

url: 'http://localhost:8000/remote/remote.js' ,

type: 'get' ,

dataType: 'jsonp' ,

jsonp: 'back' ,

jsonpCallback: "haddleData" ,

data: {}, })

.done( function (data) {

console .log(data.status);

}) //这段程序运行在8080端口的

remote.js作为远端其中写了句

haddleData ({ "status" :true,subscribes:[ "12" , "23" ]})

对于大部分js初学者，大多使用jquery,而对原生不太熟悉（譬如我。。。好惭愧）。但是须知，ajax和jsonp其实本质上是不同的东西，ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

原生js的jsonp简单实现：

< script > function haddleData (data){

console .log(data.status);

}</ script >

< script type= "text/javascript" src= "http://localhost:8000/remote/remote.js" ></ script >

当然有多个本地函数需要处理的时候，加上回调函数名才是方便的，像这样：

< script type= "text/javascript" src= "http://localhost:8000/remote/remote.js?callback=haddleData" ></ script >

【总结下jsonp】:

• 优点：

简单，函数回调在本地处理；

• 缺点：

1、安全性（存在注入漏洞，如CSRF,XSS）；

2、如果出现错误，不会像http请求那样有状态码；

3、只能使用get请求；