问题解决:web前端跨域请求

web跨域请求

浏览器报错:Access to XMLHttpRequest at’http://localhost:

3个跨域请求问题:

(1)不在同一协议(2)不在同一端口 (3)不在同一IP

解决方案:

!前两种方案用于解决请求自己服务器时的跨域问题。

!请求其它服务器,可参考服务器转发代理解决跨域问题

(1)jsonp,前后端配合解决示例:

// 服务器端接口定义的json数据
app.get('/jsonp',(req,res)=>{
    var name = req.query.name
    res.jsonp({
        name,
        age:18,
        sex:'男'
    })
})
//引入jQuery,发起JSON请求。注意callback是必须的。
<script>
        $.getJSON('http://127.0.0.1:3001/jsonp?name=11&callback=?').done((res)=>{
            console.log(res)
        })
 </script>

(2)设置服务端响应头:

	// 通过设置响应头解决跨域问题
    res.set('Access-Control-Allow-Origin','*')
<script>
        $.get('http://127.0.0.1:3001/jsonp?name=11').done((res)=>{
            console.log(res)
        })
</script>

(3)服务器转发代理解决跨域问题
服务器之间不存在跨域问题
安装模块: npm install http --save

// 服务器转发代理解决跨域问题
var http = require("http")
app.get('/info',(req,res)=>{
    // 通过设置响应头解决跨域问题
    res.set('Access-Control-Allow-Origin','*')
    // 通过服务器给另一个服务器发送请求
    http.get('http://open.douyucdn.cn/api/RoomApi/live',(req2,res2)=>{
        var str = ''
        req2.on('data',(data)=>{
            str += data
        })
        req2.on('end',()=>{
            res.send(str)
        })
    })
})
<script>
$.get('http://127.0.0.1:3001/info').done((res)=>{
            console.log(res)
        })
</script>
上一篇:jQuery库的简单使用(含ajax、jsonp)


下一篇:OO第三单元总结