代理Proxy

83 阅读1分钟
  • 因为用Ajax请求数据可能会发生跨域的现象,Proxy可以解决跨域问题
  • 原理:
    网页请求自己后端的数据不算跨域,可以直接请求。后端有个技术可以请求其他服务器的资源,这样就间接的解决了跨域问题

image.png

(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>

image.png

报了跨域的错误

(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)
	})
})

image.png