跨域的几种解决方法

什么是跨域？

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

以 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>

<scriptsrc="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>functionhaddleData(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请求；