ajax跨域的几种方式

url:http://localhost/CORS/ajax/index.html

文件目录：

1586850844.png

一，首先，ajax使用：

// 创建对象
var ajax = new XMLHttpRequest();

// 建立连接
ajax.open("GET", "http://192.168.1.3/CORS/ajax/test.json", true);

// 发送请求
ajax.send();

// 接收数据
ajax.onreadystatechange = function() {
  if (ajax.readyState === 4 && ajax.status === 200) {
    var data = JSON.parse(ajax.responseText);
    console.log(data);
  }
};

XMLHttpRequest对象可以实现跨域，但是浏览器不允许，这是个伪命题

1，服务器代理：简单粗暴，向后端发送一个url，然后又后端代理获取其他域名下的内容，然后再把获取的内容返回到前端，这种属于后端跨域，不属于前端
2，jsonp跨域
json：一种轻量级的数据交换格式
jsonp：是json的一种使用模式，用jsonp抓取的资料并不是json，而是任意javascript

二，js使用jsonp：

<button onclick="jsClick()">js发送请求</button>
    
    function createScript() {
        var eleScript = document.createElement("script");
        eleScript.type = "text/javascript";
        eleScript.src = "http://192.168.1.3/CORS/ajax/test.php?callback=test";
        document.getElementsByTagName("head")[0].appendChild(eleScript);
      }

      // 传入的回调
      function test(name) {
        console.log("跨域:" + name);
      }

      function jsClick() {
        // 问题，创建之后没有删除
        createScript();
      }

jsonp原理：创建script标签，src指向后端地址，在后端调用前端传过去的方法，不过这个简单写法有个问题：script标签没有删除，需要手动删除

1586850901.png 1586850935.png

有点尴尬

三，jquery方法：

<button onclick="jqueryClick()">jquery发送请求</button>
    
    function jqueryClick() {
        $.ajax({
          type: "get",
          url: "http://192.168.1.3/CORS/ajax/test.php?callback=test",
          dataType: "jsonp",
          jsonp: "callback",   // 传回调的方式有几种
          success: function(data) {
            alert("jquery:" + data);
          }
        });
      }

前端 -- 浏览器创建临时函数 -- 后端 -- 调用临时方法 -- 使用success中的回调方法 -- 销毁临时函数

1586850976.png

script标签也会被销毁

其他跨域方式：https://juejin.im/post/5c23993de51d457b8c1f4ee1#heading-12