问题解决：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>