js跨域的三种方法

跨域

正常情况下，我们使用ajax请求的数据都在自己的服务器上。但在一些特定的场景中，我们需要获取到别人的服务器上的数据，也就是在自己的服务器中的ajax要请求到别人的服务器的网址，这就是跨域。但是浏览器是不允许这样操作的，因为浏览器有同源策略。

同源策略：所谓同源，就是指域名、协议、端口都相同。比如说：在自己的localhost域名下请求www.baidu.com下的内容，这样的协议首先就不同，自己的是http，百度的是https，所以会被同源策略限制。

如何解决跨域

1.cors方法

在服务端设置响应头，允许跨域请求如果请求的服务端是自己可操作的话，
可以在php端设置允许跨域的响应头。代码如下：
header("Access-Control-Allow-Origin:*");
注意：
在一个项目使用多个域名的时候，可以使用这种方式来跨域 - 因为这种方式必须是自己能操作到目标文件才行

2.JSONP跨域

浏览器的同源策略没有限制html的标签属性，JSONP跨域的解决方案的原理就是利用tml签的属性不受同源策略限制，而完成跨域请求。
JSONP跨域方式主要是利用script标签的src属性完成，因为script标签请求回来的数据会被当做js代码解析。但是JSONP请求也有自身的
局限性，就是只能做get请求，如果数据量较大的话，JSONP就不太适用了。

利用标签可以跨域（当前网页的图片链接可以是别的网站上的图片）的特性，制作标签进行跨域；
js代码：

var script=document.createElement('script');
script.setAttribute('src',"http://www.php.com/test.php?callback=response");
$('head').append(script);
function response(res){
    $('#result').text(res);
    script.parentNode.removeChild(script); // 执行完成后将这个标签删掉
}

php代码：

$fun=$_GET['callback'];
echo "$fun(".$str.")";

3.服务器代理 - proxy方式

服务器没有同源限制。利用服务器没有同源限制的原理，请求当前服务器的一个路径，后让当前服务器代替自己请求数据，再将数据返回给自己
1.可以让服务器的后台语言代替自己请求
也就是说跨域请求只是限制客户端向服务端，如果是服务端向服务端请求的话就不存在这个问题，也就是说需要跨域的请求交给php服务端来做，有了结果再响应给ajax即可。

2.可以在服务器的配置文件中，设置代理

使用服务器代理(nginx)，在nginx配置文件中配置代理，具体配置如下：
location = 自定义url {
	proxy_pass 待跨域请求的地址
    }