关于前端跨域问题（本文讲解jsonp）

关于前端跨域问题

PS：最近在写项目的时候遇到了需要跨域请求数据，所以本文记录一下

---

1. 那么好咱们首先来了解下什么情况下称之为跨域

规则：
[协议]://[ip地址]:[端口]/[path路径]?[请求参数]
荔枝：
http://127.0.0.1:3000/?userName=小黑&&callback=func

那么好现在我们知道了 请求地址每个参数的名字 ，
那么到底什么是跨域呢？
就比如说： 只要是 协议, ip, 端口 这三个其中有一个不一样，
那么都可称之为跨域请求，
接着这时候我们还使用以前的方式请求后端数据，这时候是取不到的，
所以需要使用到 jsonp 之类的跨域解决方案来解决跨域请求

---

2. 接着我们来了解jsonp跨域的实现原理
   跨域有很多种方式，但本文就介绍jsonp

首先心细的朋友们已经发现了，不管是 script 或者 img 的src 和 link 的 href好像都不会受跨域的限制，那么本文的jsonp也就是恰好，通过这个漏洞来实现的。

---

好了话不多说我们先跑起来再扯淡

  // 关键代码 首先我们给 btn 标签加上一个点击事件 
  // 当我们点击一次就创建一个 script 标签 src 就放后端的地址(也就是相当于给后端发送了一次get请求)
  // 地址后面的 callback=func 是关键 
  // 也就是我们已经知道get请求已经发过去了，那我们怎么来处理请求回来的数据呢？callback=func就是来帮我们做这一件事
  btn.onclick = function () {
    var frame = document.createElement('script');
    frame.src = 'http://127.0.0.1:3000/?userName=小黑&&userSex=男&&callback=func';
    document.body.append(frame);
  };
  // 首先我们在这里创建了一个 func 函数但是我们没有调用，
  // 想象一下假如我们后端返回的是 func(data) 那么是不是就实现了调用呢
  function func(res) {
    alert(res.userName + '-----' + res.userSex);
  }

那么好，接下来看后端的代码

router.get('/', function(req, res, next) {
  // 设置编码格式
  res.setHeader('Content-Type', 'text/plain;charset=utf-8');
  let data = {
	  "userName": req.query.userName,
	  "userSex": req.query.userSex
  }
  data = JSON.stringify(data);
  console.log('func(' + data + ')');
  res.end('func(' + data + ')');
});

那么接下来我们点击 btn 的时候跨域问题就解决了

总结：jsonp 跨域主要实现采用src向后端发送get请求 后端返回func(data) 调用已经定义好了的 func函数 ，jsonp需要后端配合，至于名字方面需要和后端人员讨论好。