- 因为用Ajax请求数据可能会发生跨域的现象,Proxy可以解决跨域问题
- 原理:
网页请求自己后端的数据不算跨域,可以直接请求。后端有个技术可以请求其他服务器的资源,这样就间接的解决了跨域问题
(1)当用前端直接去请求其他服务器时,会出现跨域的情况
<button onclick="fn()">点击</button>
<script>
function fn() {
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
xhr.open("GET", 'https://juejin.cn/editor/drafts/7127259047765475335', true)
xhr.send()
xhr.onreadystatechange = function () {
console.log(xhr.readyState)
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText, 11)
} else if (xhr.readyState == 4 && xhr.status == 404) {
console.log(xhr.responseText, 22)
var obj = JSON.parse(xhr.responseText)
console.log(obj)
}
}
}
</script>
报了跨域的错误
(2)前端请求后端,让后端去请求其他服务器
// 前端只需要把上面代码的xhr.open("GET", 'https://juejin.cn/editor/drafts/7127259047765475335', true)改为xhr.open("GET", '/ajax1', true)
var router=require('./router.js')//自己的框架模块 var request=require('request') router.get('/ajax1',(req,res)=>{ var url="juejin.cn/editor/draf…" request(url,(n1,n2,data)=>{ res.end(data) }) })
//后端代码
var router=require('./router.js')//自己封装的模块
var request=require('request')
router.get('/ajax1',(req,res)=>{
var url="https://juejin.cn/editor/drafts/7127259047765475335"
request(url,(n1,n2,data)=>{
res.end(data)
})
})