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>