jsonp和cors 以及反向代理 解决跨域问题及其原理

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

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

 

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

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