前端跨域请求方法总结

在微信公众号前端大全上看到一篇文章 - 前端跨域请求原理及实践，跟着里面的方法进行了一些操作，在这里进行总结并加入一些其他内容。

跨域是什么？

大家都知道，只要请求的URL的域名、端口、协议中有一个不一样，就是不同的域。所以跨域就是去请求和你不同的域的资源。简单来说，就像是，你平时用自己家的网线上网，但是最近网速不好，想试试邻居家的100M光纤。但毕竟是邻居家的嘛，你也不是想用就能用的。这种就像是跨域，你去拿不属于你家的资源。虽然是邻居的网，却也不是没方法用。比如你可以和邻居商量，能不能用一根网线，接入他们的网线接口，又比如，你们挨得近，刚好邻居家的路由器又非常强大，可以搜索到他们的信号，那也可以去问问wifi密码，倘若刚好邻居又不愿意借网给你，你也可以去试试破解一下路由器什么的（当然，不推荐哈哈）

允许通信

• （同一域名）
  http://www.a.com/a.js
http://www.a.com/b.js
• （同一域名不同文件夹）
  http://www.a.com/css/a.js
http://www.a.com/js/b.js

不允许通信

• （不同端口）
  http://www.a.com:8888.js
http://www.a.com:8889.js
• （不同协议）
  http://www.a.com.js
https://www.a.com.js
• （禁止使用域名对应IP）
  http://www.a.com.js
http://88.88.88.172.js
• （不同子域 - cookie这种情况下也不允许访问）
  http://www.a.com.js
http://js.a.com.js 或者 http://a.com.js
• （不同域名）
  http://www.b.com.js
http://www.a.com.js

跨域也有很多解决方法
先使用node+express搭建两个node服务器进行测试

node安装地址
安装完毕命令行输入 node -v 能显示版本号即可

express安装教程
npm install express

安装完毕就可以写代码了，监听两个端口，port:3000和port:3001

1、JSONP ( json padding )

AJAX无法跨域请求资源，但是后来人们发现，这个限制对能用src导入的标签并不管用，像<img>、<script>、<iframe>。后来人们通过类似调用脚本的方法，去访问外部资源，外部资源返回一个json的数据包装（例如下文的jsonpCallback('{"name":3000}')），然后通过一个回调函数来接收数据。

JQuery集成的 $.ajax 实现 JSONP 跨域

【Port：3000】

let express = require('express');
let app = express();

app.get('/',(req,res,next)=>{`
    res.sendFile(__dirname + '/cross-domain.html')
})
app.get('/data',(req,res,next)=>{
    res.json({'name': 3000})
})

app.listen(3000, () => {
    console.log('success')
})

【Port：3001】

let express = require('express');
let app = express();

app.get('/',(req,res,next)=>{
    res.send('welcome')
})
app.get('/data',(req,res)=>{
    var cb = req.query.callback;
    //  此处需要进行字符串拼接，否则会出现编译错误。
    //  parsererror Error: jsonpCallback was not called
    var data = cb +'('+ "{'name': 3001}"+')'
    console.log(data)
    res.send(data)
    res.end()
})

app.listen(3001, () => {
    console.log('success')
})

【HTML】

<script>
        function jsonpCallback(data){
            console.log(data.name)
        }

        $('#btn1').click(function(){
            $.ajax({
                url: 'http://localhost:3001/data',
                type: 'GET',
                dataType: 'jsonp',
                // jsonp 字段含义为服务器通过什么字段获取回调函数的名称
                jsonp: 'callback',
                 // 声明本地回调函数的名称，jquery 默认随机生成一个函数名称
                jsonpCallback: 'jsonpCallback',
                success(data){
                    console.log(data)
                }
            })
        })
</script>

相当于使用url传递了一个参数?callback=jsonpCallback，让node3001服务器接收并返回'jsonpCallback'+'('+'{"name":3000}'+')'去调用jsonpCallback函数。

原生js实现 JSONP 跨域

【Port：3000】
与上文一致
【Port：3001】
与上文一致
【HTML】

<script>
        function jsonpCallback(data){
            console.log(data.name)
        }
</script>
<script src='http://localhost:3001/data?callback=jsonpCallback'></script>

虽然jquery方式看上去式ajax请求，但是实际上只是将原生js的方法进行了封装。jq的method方法也可以更换成'POST'，但是最后在请求时还是使用GET的方式进行请求，系统会进行转换。
JSONP的请求方法就是在script标签中进行，所以只能够使用GET方式请求。如果需要看例子，可以看开头提及的文章，内有POST请求范例。

2、Vue开发过程中遇到的跨域问题

在vue-cli中有个config>index.js文件，dev下设置了proxyTable，给开发者需要跨域时使用。
直接上代码
【Vue - port：8080】

created () {
    let xhr = new XMLHttpRequest();
    xhr.open('get', 'http://localhost:3001/data');
    xhr.send();
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
          console.log(xhr.responseText)
      }
    };
 }

【Port：3001】
与上文一致
若此时进行查看，控制台会出现

cross-domain.jpg
打开文件config>index.js，在proxyTable中加入

proxyTable: {
    '/crossdomain': {
        target: 'http://localhost:3001/',
        changeOrigin: true,
        pathRewrite: {
        '^/crossdomain': '/'
        }
    }
}

并修改Vue中代码
xhr.open('get', 'crossdomain/data');

当你将changeOrigin的值设置为true，系统会虚拟一个服务器接收请求，所以需要将请求中的url改为/crossdomain。

3、CORS（corss-origin resource sharing 跨域资源共享）

CORS支持浏览器向跨域服务器发送XMLHttpRequest请求，JSONP只支持GET方法，但是CORS支持POST方式。一旦浏览器发现Ajax的跨域请求，会为其加上请求头。CORS时服务器端操作，前端请求方式不变。
【Port：3000】
与上文一致
【Port：3001】

let express = require('express');
let app = express();

app.get('/',(req,res,next)=>{
    res.send('welcome')
})
app.get('/data',(req,res)=>{
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    var data = {'name': 3001}
    res.json(data)
})

app.listen(3001, () => {
    console.log('success')
})

【HTML】

<script>
        $('#btn1').click(function(){
            $.ajax({
                url: 'http://localhost:3001/data',
                type: 'GET',
                success(data){
                    console.log(data)
                }
            })
        })
</script>

4、Window.name

5、Window.postMessage

这两个方法可以推荐看这个博客