21-02-27跨域问题的简单解决

简单解决跨域

因为同源策略，当域名，地址，协议有一项不相同，就是非同源，就会产生跨域问题，就无法正常发送网络请求，
可以通过 jsonp 或者 cors 解决跨域问题

1、jsonp

关于jsonp解决跨域

1. 原理：利用了script标签发请求不受同源策略的限制。所以不会产生跨域问题
2. 套路：动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
3. 弊端：
   1. 只能解决get请求跨域的问题。
   2. 后端工程师必须配合前端
4. 备注：有这样一种感觉：前端定义函数，后端“调用”。后端返回的数据，前端以js格式解析，并且运行。

————————————————————————————————

简单使用 jsonp

1、前段代码

btn.onclick = function () {
    //1.提前定义好一个等待被调用的函数
    window.callback= function(result) {
      console.log(result)
    }
    //2.创建一个script节点
    const script = document.createElement('script')
    //3.为节点指定src地址，同时指定好回调函数的名字
    script.src = 'http://localhost:3000/test?callback=callback'
    //4.将节点插入页面
    document.body.appendChild(scriptNode)
  }

2、 后台代码

let express = require('express')
let app = express()
app.use(express.static(__dirname+'/public'))

app.get('/test',function (req,res) {
  let {callback} = req.query                  //结构赋值获取提前定义的函数
  let Arr = [{name:'peiqi',age:12},{name:'suxi',age:16}] //自定义数据
  res.send(`${callback}(${JSON.stringify(Arr)})`)  //返回准备好的韩式调用，把数据当做参数传回去。
})

app.listen(3000,function (err) {
  if(err) console.log(err)
  else {
    console.log('演示jsonp解决跨域服务器，启动成功了！')
    console.log('兄弟，你要用编译器打开网页，因为你要解决跨域问题！')
  }
})

3、jQuery 使用 jsonp

1. 提前定义好一个等待被调用的函数
2. 创建一个script节点
3. 为节点指定src地址，同时指定好回调函数的名字
4. 将节点插入页面
5. 备注：以上所有步骤，都由jquery底层全部完成

$('#btn').click(function () {
    //完整写法
    $.ajax({
      url:'http://localhost:3000/test',
      method:'get',
      dataType:'jsonp', //该属性，控制了上面的4步
      data:{name:'zhangsan',age:18},
      success:function (result) {
        console.log(result)
      },
      error:function (err) {
        console.log(err)
      }
    })
    
    //精简写法
    /*$.getJSON('http://localhost:3000/test?callback=?',{name:'zhangsan',age:18},function (data) {
      console.log(data)
    })*/
  })

2、cors

• cors的使用：

  安装： yarn add cors

  引入： const cors = require（‘cors’）

• 在响应头中设置参数，第一个是’Access-control-Allow-origin’，’*’ 代表所有来源均可以访问

let express = require('express')
let app = express()
app.use(express.static(__dirname+'/public'))

app.get('/test',function (req,res) {
  let personArr = [{name:'peiqi',age:12},{name:'suxi',age:16}]
  //
  res.setHeader('Access-Control-Allow-Origin','http://localhost:63348')
  res.send(personArr)
})

app.listen(3000,function (err) {
  if(err) console.log(err)
  else {
    console.log('演示corsp解决跨域服务器，启动成功了！')
    console.log('兄弟，你要用编译器打开网页，因为你要解决跨域问题！')
  }
})

设置允许跨域的域名，* 代表允许任意域名跨域。把下面的 * 替换为 https://baidu.com ，就允许百度来源的访问

 res.header("Access-Control-Allow-Origin","*");

允许的header类型

 res.header("Access-Control-Allow-Headers","content-type");

跨域允许的请求方式

 res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");