跨域–非同源策略请求
协议 域名 端口号 三者都一样是同源 有一个不同就是跨域
解决方案:
JSONP + JQuery 的处理方式
先处理前端
- 在新建的html在页面引入JQuery
- 新建一个js文件 在html页面引入该js
- 在js文件中写入测试代码
$.ajax({
url:'http:127.0.0.1:8001/list',
method:'get',
dataType:'jsonp',// 执行的是JSONP请求
success:res=>{
console.log(res)
}
})
后端处理
- npm init 初始化
- 新建一个js文件 这里要用到express包
npm install express
- 启动一个服务 监听端口号
let express = require('express');
let app = express();
app.listen(8001,()=>{
console.log('ok')
})
- 写一个接口处理 就是发送请求时的那个接口
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请求 安全性也不是特别好
其他跨域方式: