前端面試筆記-Ajax及跨域小白向

時間 2019-11-17

原文原文鏈接

前言

前端一年的練習生，水平稍微菜了點，面試常常碰壁，把一些經驗記錄下來作個分享，盡力寫好，但願能幫助一部分人html

什麼是Ajax

簡單的說就是一個發送請求的方法，全程爲Asynchronous JavaScript and XML（異步的JS和XML，XML多用的JSON代替），剛開始我還覺得跟axios同樣須要專門new一個，其實Ajax只是一項異步發送請求的技術, 至於爲何須要Ajax, 有個十幾個帶驗證的表單，每次提交的時候纔去驗證蠢了點，Ajax能在每個字段填完後發起請求校驗。前端

發送一個簡單的Ajax請求

首先建個服務器，我這水平菜的不行，直接上Node.js建（前端學Node.js不虧，相較於Spring簡單易上手）node

// 新建一個server.js文件
const http = require('http')
http.createServer(function (request, response) {
    console.log('請求接收到了')
    response.end('666')
}).listen(3030)
// 在控制檯輸入node server.js啓動
// 就這麼簡單，瀏覽器輸入http://localhost:3030 就會輸出666
複製代碼

經過Ajax發送個請求webpack

// 在test.html中
<script>
    var xhr = new XMLHttpRequest(); //這個就是常說的Ajax，的實現的一種
    xhr.open('GET', 'http://127.0.0.1:3030')
    xhr.send()
</script>
複製代碼

這時候盯着server.js的控制檯就會出現一條請求收到了，發送了一次Ajax請求ios

什麼是跨域

簡單的理解，若是把一個端口看成本身家的話，跨域就是去別人家串門，從自家房間裏來回躥這叫同域。nginx

www.test.a.com:3030/web

請求協議(http) + 子域(www) + 主域(test.a) + 端口號(3030)，這其中哪一個變了，都至關於跨域面試

回到上面的那個例子，在瀏覽器輸入http://127.0.0.1:3030 這時候在瀏覽器按下F12看console的話，就會發現一條報錯，意思XHR請求這個地址被CORS攔了，But在server.js的控制檯裏的確有請求收到了，說白了跨域實際上是瀏覽器本身乾的事，瀏覽器以爲這操做有安全隱患就報了條錯，但其實控制檯仍是有反應的 axios

跨域解決方案

列出最經常使用的三種，JSONP, CORS, 反向代理，那種讓你說出五六種的面試官我懷疑是在找事跨域

JSONP

script標籤是不會被管是否是跨域的，也就是

<body>
<!-- <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8887')
    xhr.send()
</script> -->
<script src="http://127.0.0.1:8887"></script>
</body>
複製代碼

這樣寫的話，就不會報錯，瀏覽器不會管，懶人方案，可是隻支持get請求。

CORS

W3C推出的方案，跟前端沒什麼關係，主要是後臺在返回數據的時候加個請求頭，Access-Control-Allow-Origin

nginx反向代理

最經常使用的解決方案，主要也是後臺的事（我一個初級實習生水平是來面前端的。。。）簡單的說，原本是A跟B直接通話，反向代理是A並不知道B，而是跟C通話，C是要跟B，D, E誰通話A無論，完後再C把響應返回給A，

// proxy服務器
server {
listen       81;
server_name  www.domain1.com;
location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裏域名
        index  index.html index.htm;
        # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源制，下面的跨域配置可不啓用
        add_header Access-Control-Allow-Origin http://www.domain1.com; #當前端只跨域不帶cookie時，可爲*
        add_header Access-Control-Allow-Credentials true;
    }
}

複製代碼