跨域问题

同源策略

协议名、域名、端口 三者都保持一致

跨域

协议名、域名、端口 只要有一个不一致就算跨域

跨域什么时候会失败？

• Ajax请求时会失败
• 普通的html标签不会失败（例如：、、

如何解决跨域失败问题？

主流：

• JSONP
• CORS【跨域资源共享】
• Nginx【应用服务器】

前端的代码被后端包起来、html标签

JSONP

// 前端
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script>
    $.ajax({
      url: "http://localhost:3000/list?text=123",
      method: "GET",
      dataType: "jsonp",
      jsonp: "callback",
      jsonpCallback: "look",
      success: function (res) {
        console.log("结果：" + res);
      },
    });
  </script>

// 后端
const express = require('express')
const app = express()


app.get('/list', function (req, res) {
  var age = req.query.text;
  var callback = req.query.callback;
  var arr = ['啦', '拉拉', '啦啦啦'];
  var str = `${callback}(${JSON.stringify(arr)})`
  res.send(str) 
})

app.listen(3000)

JSONP的跨域原理？

本质不是ajax，他并没有使用XMLHttpRequest对象，用的是动态创建

JSONP有什么特点？

优点：兼容性好

缺点：只支持GET，书写比较麻烦

CORS

优点：支持所有请求方式

缺点：只兼容到：IE8