服务器端代理proxy实现跨域访问
生活随笔
收集整理的這篇文章主要介紹了
服务器端代理proxy实现跨域访问
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在koa中使用代理proxy
我們知道瀏覽器有個"同源策略"的限制，再回憶一下，同源是 什么？所謂同源,即同協(xié)議、同域名、同端口。如果不滿足同源三者條件任意一個，即是非同源，也就是跨域訪問。
跨域訪問有不同的實現(xiàn)方法，今天來研究一下服務(wù)端代理是怎么實現(xiàn)跨域的。
服務(wù)器端代理是如何實現(xiàn)跨域的原理：服務(wù)器端不直接去發(fā)出跨域請求，而在服務(wù)器端設(shè)置一個代理(proxy),由服務(wù)器端向跨域下的代理發(fā)出請求，再將請求的結(jié)果返回到前端。
在koa中使用代理，需要引入koa-server-http-proxy模塊(中間件來代理)
下面的小實例看一下怎么使用代理：
服務(wù)器端：
客戶端：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>5000端口</h1><button class="btn1">同源請求</button><button class="btn2">非同源請求</button><script>// 模擬同源訪問document.querySelector(".btn1").onclick = function(){let xhr = new XMLHttpRequest();xhr.open("post","/serverPost",true);xhr.onload = function(){console.log(xhr.responseText);}xhr.send();} // 模擬非同源訪問(跨域訪問)document.querySelector(".btn2").onclick = function(){let xhr = new XMLHttpRequest();xhr.open("post","/api/serverPost",true);xhr.onload = function(){console.log(xhr.responseText);}xhr.send();} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的服务器端代理proxy实现跨域访问的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 站长必去的10个网站
- 下一篇： 从零开始搭建一个springCloud项