浏览器端的同源策略: 如果两个页面的协议,端口和域名中的其中任意一个不相同, 它们就是不同源的, 浏览器会限制他们之间的资源交互;
跨域: 跨域的安全限制只针对浏览器, 服务器是没有跨域的安全限制的;
解决跨域问题的原理有三个:
1: jsonp的原理是script 标签的 src 属性没有同源限制 , 核心是后台返回一个函数的调用, 同时传入后台的数据
2. cors请求会自动给跨域请求添加 头信息, 只要服务器实现了cors接口, 客户端就可以发送跨域ajax请求
3. webpack-dev-server反向代理 : 服务器之间没有跨域问题
//1.cors 解决跨域问题
const app = require('http').createServer(function(req, res) =>{
req.setHeader('Access-Control-Allow-Origin' , '*')
res.write('cors解决跨域问题')
res.end()
}).listen(5000)
//创建一个html文件,通过, 发送一个ajax请求
<input type="button" id="btn1" value="ajax请求">
<script>
//vscode live-server 自动在一个新的端口打开页面, 就会产生跨域
$(function() {
$('#btn1').click(function() {
$.ajax ({
url: 'http://127.0.0.1:5000',
type: 'get',
success: (res)=>{
console.log(res); //cors解决跨域问题
}
})
})
})
</script>
//1.1 利用express 框架中的 cors 中间件解决跨域问题,原理与1同 //1.先下载cors 模块 const express = require('express') const app = express() //res.setHeader( 'Access-Control-Allow-Origin','*') //2.导入cors中间件 const cors = require('cors') //注册中间件 app.use(cors()) //3. 监听请求 app.get('/', (req, res) => { res.write('利用cors中间件解决跨域问题') res.end() }) app.listen(5000, ()=> { console.log('server running at http://127.0.0.1:5000'); }) //ajax 跨域请求就能够获得数据 success(res) { console.log(res) //利用cors中间件解决跨域问题 }
// 2.jquery 里 利用 <script src=''> 来解决跨域问题 //1.引如jquery文件 <script src="jquery/jquery.min.js"></script> //2**.在动态生成的script标签之前定义函数, 如果在script标签之后定义, 执行结果为函数未定义 <script> function showData(res) { console.log(res); } </script> //3.实现逻辑: 1.点击"获取跨域数据"按钮 ->在head中添加一个src 为请求数据地址的script 标签, 地址后面带回调函数名; $('#btn-getData').on('click', function(){
//动态生成script标签时.为了避免产生</script>和head里的标签连接的起来的问题, 有两种写法比较稳妥
//1. 不写</script> $('head').append('<script src="http://localhost:5003?callback=showData">')
//2. dom 生成
var script = document.createElement('script')
script.src = 'http://127.0.0.1:5003?callback=showData'
$('head').append($(script))
})
//js代码
//js 返回函数的调用, 并且传入后台数据
const url = require('url') //url中间件获取参数
const app = require('http').createServer((req,res) => {
let obj= {
name : 'nora',
hobby: ['lift weights', 'reading', 'jogging']
}
let fName = url.parse(req.url, true).query.callback
console.log(url.parse(req.url, true))
//转换字符串格式
res.write(`${fName}(${JSON.stringify(obj)})`)
res.end()
}).listen(5003)
</script>
// 2.1 jquery jsonp通过 ajax 发送跨域请求(原理相同)
//只需要设置 dataType: 'jsonp' 即可发送ajax请求, 请求会自动生成回调函数, 返回的数据 为jsonp 格式,
//可以直接在ajax 的回调函数 success 中获取到数据, JSON.stringify转为字符串即可
$.ajax({
url: 'http://127.0.0.1:5002',
dataType: 'jsonp',
data: {
a: 2,
b: 1
},
//默认是 callback=jQuery19109625797671952492_1547105570922
//自定义后值是 cb=bbb
jsonp: 'cb',
jsonpCallback : 'bbbb',
success(res) {
console.log(res);//2
},
error() {
console.log("拿不到数据")
}
})
cors和Jsonp 解决跨与问题的:
1. cors 支持所有类型的http请求, 但jaonp因为发送的是本质上利用的是script标签的src属性, 所以只能支持get请求
2. jsonp 能够支持老式浏览器,并且能够向不支持cors 的网站请求数据