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 的網站請求數據