如何跨域访问的两种方法~

Posted 2021-01-17 lianer88

1. JSONP，需要客户端与服务端配合
    什么是：填充式JSON——JSON with Padding
    何时: 今后跨域，首选jsonp
    如何:
     基本思想：用其它可以跨域请求的元素，代替ajax
     程序中都是用<script>元素代替ajax发送请求
     方案一:
      1. 服务端: 将要返回的数据，填充进一条字符串格式的js语句中，组成一条正确的可执行的js语句，再返回
      2. 客户端: 添加<script src="服务器端地址">
      结果: script可跨域请求到服务器返回的js语句，并在客户端立刻执行。
      问题: 服务端返回的js语句是写死的，众口难调。
     方案二:
      1. 服务端: 返回一条自定义函数的调用语句
        要求客户端必须执行指定名称的函数
      2. 客户端: 提前定义一个与服务端同名的函数
        函数有一个参数可接受服务器端的数据
        函数内可执行任意操作
      问题: 函数名是写死的，极容易发生冲突！
     方案三:
      1. 服务端：接受一个函数名参数
                 将客户端发来的函数名参数拼接到js语句的开头！
      2. 客户端：<script src="地址?参数名=本地函数名"
      问题: script是写死的！只能在页面加载时请求一次
     方案四:
      1. 服务端不变
      2. 客户端: 动态创建script元素
        script只要被加到页面上，就立刻自动请求
        问题: script不断累积
        解决: 在回调函数中自动删除script
    其实: $.ajax也支持jsonp
     $.ajax({
       ... ,
       dataType:"jsonp",
       ...
     })
     强调: dataType:"jsonp"需要服务器端配合才能实现。
     其实，dataType:"jsonp"的原理和方案四一致:
      1. 也是通过在head中动态添加<script>发送请求
      2. 也是通过?callback=函数名，发送函数名到服务端
      3. 函数名其实是$.ajax自动为success函数生成的随机函数名。
  2. CORS，只要服务器端允许即可
    在服务器端添加响应头: node中:
       res.writeHead(200,{
         "Content-Type":"application/json;charset=utf-8",
         "Access-Control-Allow-Origin":"指定来源域名"|"*"
       })