JAVA高级面试进阶训练营视频教程

admin

 浏览器端的同源策略:   如果两个页面的协议,端口和域名中的其中任意一个不相同, 它们就是不同源的, 浏览器会限制他们之间的资源交互;

跨域:  跨域的安全限制只针对浏览器, 服务器是没有跨域的安全限制的;

 

解决跨域问题的原理有三个: 

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 的网站请求数据