JSONP和JQuery实现跨域

跨域–非同源策略请求
协议 域名 端口号 三者都一样是同源 有一个不同就是跨域

解决方案:
JSONP + JQuery 的处理方式
先处理前端

1. 在新建的html在页面引入JQuery
2. 新建一个js文件 在html页面引入该js
3. 在js文件中写入测试代码

$.ajax({
    url:'http:127.0.0.1:8001/list',
    method:'get',
    dataType:'jsonp',// 执行的是JSONP请求
    success:res=>{
      console.log(res)
    }
})

后端处理

1. npm init 初始化
2. 新建一个js文件 这里要用到express包 npm install express
3. 启动一个服务 监听端口号

let express = require('express');
let app = express();

app.listen(8001,()=>{
    console.log('ok')
})

4. 写一个接口处理 就是发送请求时的那个接口

app.get('/list',(req,res)=>{
    // 会通过callback传一个函数进来
    let {callback = Function.prototype} = req.query; // Function.prototype(默认值)是一个匿名空函数 执行没有什么效果
    let data = { // 服务端准备数据
        code:0,
        message:'shier'
    };
    res.send(`${callback}(${JSON.stringify(data)})`) // 服务端返回数据
})

在控制台输入 node serverJSONP 启动
会输出 ok

在浏览器打开你的html页面 能看到数据请求成功

缺点:JSONP只能处理GET请求 安全性也不是特别好

其他跨域方式:

CORS 跨域资源共享

http proxy 代理