前端的几种跨域方法

跨域请求cookie传不过去

跨域

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

一、跨域请求资源方案

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/");
 
复制代码

转载于:https://juejin.im/post/5c3564756fb9a04a01648306