前端跨域尝试

原生ajax：get

function getTime(){
        //1.创建ajax对象
        var xhr= new XMLHttpRequest();
        //2.准备请求（请求类型，后端地址）：此处请求并没有传数据出去，只是发送了一个请求
        xhr.open("get","/gettime");
        //3.监听ajax的状态变化
        xhr.onreadystatechange= funtion(){
            if(xhr.status==200 && xhr.readyState==4){
                var result = xhr.responseText;
                //放到相应的位置
                document.getElementById("time").innerHTML = result;
            }
        }
        //4.发送请求
        xhr.send();
    }

post:

function login() {
        //1.获取到用户名与密码
        var userName = "marry";
        var pwd = 123;
        //2.创建ajax对象
        var xhr = new XMLHttpRequest();
        //3.准备请求（请求类型，后台地址）
        xhr.open("post", "http://localhost:5000/user/login");
        //如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //3.监听ajax的状态变化
        xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var result = xhr.responseText;
                    // responseText获取到的都是字符串
                    console.log(result);
                    JSON.parse(result);
                    console.log(result);
                    console.log(result.err);
                    if (result.err == 0) { //登录成功
                        console.log("登陆成功");
                    } else { //登录失败
                        console.log("登陆失败");
                    }
                }
            }
            //4.发送请求:post请求必须通过.send()传数据到后台
        xhr.send("us=" + userName + "&ps=" + pwd);
    }

ajax:jquery

 $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '
' + comment['username']
                                         + ':
 + comment['content']
                                         + '
';
                         });
                         $('#resText').html(html);
                      }
         });

• 尝试1：CORS:
  版本一：
  res.header(“Access-Control-Allow-Origin”,"*")
  在接口中写入：

router.post('/login', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    let {
        us,
        ps
    } = req.body
    ……

版本二：引入node中间件咋server.js文件中：

//cors跨域
const cors = require('cors')
app.use(cors())

• 尝试2 ：jsonp
  版本一：原生代码：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

版本二：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

缺点：后端要设置一个回调函数，且只能请求get