跨域（cors和jsonp）

目录

cors

jsonp

    jquery的jsonp

---

cors

• cors是通过服务器开发跨域权限 来实现跨域效果的

• 实现cors跨域

  • 我们实现cors跨域 只需要设置响应头中的两个键值对即可，分别是——Access-Control-Allow-Origin 和 Access-Control-Allow-Methods

  • 我们这里以express为例

  • //在响应之前设置好响应头即可
    let express = require("express");
    let app = express();
    app.get("/index",(req,res)=>{
        //解决跨域问题
        res.set("Access-Control-Allow-Origin","*");//设置哪些地址的前端页面可以访问服务器
        res.set("Access-Control-Allow-Methods","*");//设置哪些请求方式 可以跨域访问我们的数据
        res.send("张三")
    })
    app.listen(3000)
    一般我们会将cors跨域的代码 单独编写为一个中间件
    
    //在响应之前设置好响应头即可
    let express = require("express");
    let app = express();
    app.use((req,res,next)=>{
        //解决跨域问题
        res.set("Access-Control-Allow-Origin","*");//设置哪些地址的前端页面可以访问服务器
        res.set("Access-Control-Allow-Methods","*");//设置哪些请求方式 可以跨域访问我们的数据
        next();
    })
    app.get("/index",(req,res)=>{
        res.send("张三")
    })
    app.listen(3000)

  • cors是一种 相对而言 更为优化的跨域方式 一来可以保证跨域访问数据的安全性，另外，也确实很方便
  • 优点：可以保证跨域的安全性，写法方便，而且任何请求方式都可以实现跨域

  • 另外 在express中 我们还可以使用现成的第三方中间件——cors 来解决cors跨域问题

    • 下载中间件：npm i cors

    • 引入中间件：let cors = require("cors");

    • 使用中间件：服务器对象.use(cors());

    • 注意：使用cors中间件的代码 必须要写在所有中间件使用的前面

jsonp

• jsonp和json没有关系

• jsonp是一种跨域访问数据的方式 这种方式 需要前端页面 和服务器代码配合来实现效果

• jsonp的起源

  • 在浏览器中，虽然存在同源策略 但是 html标签的一些属性 天生就具备跨域访问数据的能力。

  • 例如：src、href等属性

  • jsonp就是利用了这些属性天生的跨域能力 来实现跨域效果

• jsonp示例代码

  • //前端页面代码
    //0.声明一个函数 用来接收跨域访问到的数据
    let fn = (res)=>{
        console.log(res);//形参res就可以接收到跨域访问到的数据
    }
    //1.创建一个script标签 
    let scr = document.createElement("script");
    //2.设置script标签的src属性 为 跨域访问数据的服务器地址 并 提交数据（不论需不需要提交数据 都至少要提交fn函数 ）  通过get请求方式来提交  因为src和href等属性默认使用的就是get请求方式
    scr.src = "跨域服务器地址?callback=fn";//注意 这里提交的是函数名
    //3.将设置好src属性的script标签 添加到页面中
    document.querySelector("body").appendChild(scr);
    //后台服务器代码
    let express = require("express");
    let app = express();
    app.get("/index",(req,res)=>{
        //1.接收前端提交过来的回调函数名
        let {callback} = req.query;
        //2.响应前端提交过来的回调函数的 调用表达式
        res.json(`${callback}(要响应的数据)`)//fn(要响应的数据)
    })
    app.listen(3000)

  • 注意：前端页面中 编写回调函数的时候 一定要写成全局函数 因为响应回来之后 会在全局作用域内部调用回调函数

  • 缺点：无法保证跨域的安全性（无法限制跨域的来源、get方法提交数据安全性差），只能使用get请求跨域，写法复杂

jquery的jsonp

• 在jquery中 如果想使用jsonp跨域 可以直接使用ajax方法 将dataType 设置为jsonp即可
  $.ajax({
      url:"跨域服务器url地址",
      dataType:"jsonp",
      success(res){
          console.log(res);
      }
  })