前端的几种跨域方法

跨域请求cookie传不过去

跨域

CORS与JSONP的使用目的相同，可是比JSONP更强大。 JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

1、跨域请求资源方案

1. 野路子出身却好用的方式：JSONP；
2. 官方推荐的跨域资源共享方案：CORS；
3. 使用HTML5 API：postMessage；
4. 抛弃HTTP，使用：Web Sockets；

主要讲一下jsonp使用方法

1，先准备环境：两个服务端口不同，构成跨域请求的条件

请求数据：请求数据的端口为8080

先看下直接发起ajax请求会怎么样

请求的结果以下图：能够看到跨域请求由于浏览器的同源策略被拦截了。

接下来看如何发起跨域请求。解决跨域请求的方式有不少，这里只说一下jquery的jsop方式及其原理。

首先咱们须要明白，在页面上直接发起一个跨域的ajax请求是不能够的，可是，在页面上引入不一样域上的js脚本倒是能够的，就像你能够在本身的页面上使用 标签来随意显示某个域上的图片同样。

好比我在8080端口的页面上请求一个9090端口的图片：能够看到直接经过src跨域请求是能够的。

那么看下如何使用 scirpt标签来完成一个跨域请求：

  当点击"跨域获取数据"的按钮时，添加一个scipt标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

  showData便是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，由于是script脚本，因此自动调用showData函数，而result就是showData的参数。

  至此，咱们算是跨域把数据请求回来了，可是比较麻烦，须要本身写脚本发起请求，而后写个回调函数处理数据，不是很方便。

再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码以下：最简单的方式，只需配置一个dataType:'jsonp'，就能够发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，能够看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData同样，若是有success函数则默认success()做为回调函数。

再看看如何指定特定的回调函数：第30行代码

  回调函数你能够写到script下(默认属于window对象)，或者指明写到window对象里，看jquery源码，能够看到jsonp调用回调函数时，是调用的window.callback。

  而后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，而后再调用了success。因此，success是返回成功后一定会调用的函数，就看你怎么写了。      

再看看如何改变callback这个名称：第23行代码。指定callback这个名称后，后台也须要跟着更改。

2，CORS请求后端设置

// * 表示容许任何域名跨域访问
    response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名能够访问
  response.setHeader("Access-Control-Allow-Origin","http:localhost:8080/");
 
复制代码