vue跨域面試題及答案

單項(xiàng)選擇題（每題2分，共10題）1.Vue中常用的跨域解決方案不包括以下哪種？A.JSONPB.CORSC.axiosD.proxyTable答案：C2.JSONP跨域的原理是利用了？A.ajax請求B.script標(biāo)簽的src屬性C.XMLHttpRequestD.fetch答案：B3.CORS跨域的關(guān)鍵是服務(wù)器設(shè)置？A.響應(yīng)頭B.響應(yīng)體C.請求頭D.請求方法答案：A4.在Vue項(xiàng)目中配置proxyTable是在哪個(gè)文件？A.main.jsB.router.jsC.config/index.jsD.App.vue答案：C5.以下哪種不是Vue跨域的場景？A.前后端分離項(xiàng)目B.訪問不同端口APIC.同一服務(wù)器不同目錄訪問D.訪問第三方API答案：C6.對于簡單請求，CORS服務(wù)器只需設(shè)置哪個(gè)響應(yīng)頭？A.Access-Control-Allow-OriginB.Access-Control-Allow-MethodsC.Access-Control-Allow-HeadersD.Access-Control-Max-Age答案：A7.JSONP只支持哪種請求方法？A.POSTB.GETC.PUTD.DELETE答案：B8.Vue項(xiàng)目使用axios進(jìn)行跨域請求，配置基礎(chǔ)路徑的屬性是？A.baseURLB.urlC.headersD.method答案：A9.當(dāng)服務(wù)器和前端在不同域名時(shí)，會出現(xiàn)？A.同源策略限制B.性能問題C.語法錯(cuò)誤D.樣式?jīng)_突答案：A10.在Vue中使用CORS跨域，前端需要做什么額外操作？A.配置大量請求頭B.無需特殊操作C.修改服務(wù)器代碼D.重新構(gòu)建項(xiàng)目答案：B多項(xiàng)選擇題（每題2分，共10題）1.以下屬于Vue跨域解決方案的有（）A.JSONPB.CORSC.使用代理服務(wù)器D.修改瀏覽器同源策略答案：ABC2.關(guān)于JSONP跨域，正確的說法有（）A.兼容性好B.只支持GET請求C.安全性高D.依賴服務(wù)器支持答案：ABD3.CORS跨域包含的請求類型有（）A.簡單請求B.復(fù)雜請求C.預(yù)檢請求D.重定向請求答案：AC4.在Vue中配置proxyTable可以設(shè)置的參數(shù)有（）A.targetB.changeOriginC.pathRewriteD.headers答案：ABC5.使用axios進(jìn)行跨域請求，可設(shè)置的屬性有（）A.methodB.dataC.paramsD.timeout答案：ABCD6.以下哪些是跨域可能帶來的問題（）A.數(shù)據(jù)泄露風(fēng)險(xiǎn)B.網(wǎng)絡(luò)延遲增加C.瀏覽器報(bào)錯(cuò)D.樣式加載失敗答案：ABC7.復(fù)雜請求的CORS預(yù)檢請求會包含哪些請求頭（）A.Access-Control-Request-MethodB.Access-Control-Request-HeadersC.OriginD.Content-Type答案：ABC8.關(guān)于跨域和同源策略，說法正確的有（）A.同源策略是為了保證用戶信息安全B.跨域是突破同源策略限制C.所有瀏覽器都嚴(yán)格遵循同源策略D.跨域會降低網(wǎng)站性能答案：AB9.在Vue中處理跨域時(shí)，對服務(wù)器端的要求有（）A.支持CORS響應(yīng)頭設(shè)置B.處理JSONP回調(diào)C.配置代理服務(wù)器D.修改服務(wù)器端口答案：ABC10.以下哪些技術(shù)可以和Vue結(jié)合處理跨域（）A.nginxB.expressC.springbootD.jquery答案：ABC判斷題（每題2分，共10題）1.JSONP是一種安全的跨域解決方案。（×）2.CORS是現(xiàn)代瀏覽器推薦的跨域方式。（√）3.在Vue中使用proxyTable配置跨域，前端無需發(fā)送特殊請求頭。（√）4.簡單請求和復(fù)雜請求的CORS處理流程一樣。（×）5.JSONP跨域可以在服務(wù)器端設(shè)置響應(yīng)頭來實(shí)現(xiàn)。（×）6.只要服務(wù)器設(shè)置了CORS響應(yīng)頭，前端任何操作都能跨域。（×）7.Vue項(xiàng)目中使用axios跨域必須配置proxyTable。（×）8.同源策略限制了不同源頁面之間的資源共享。（√）9.跨域一定會導(dǎo)致網(wǎng)站性能下降。（×）10.復(fù)雜請求的預(yù)檢請求是為了確認(rèn)服務(wù)器是否支持跨域。（√）簡答題（每題5分，共4題）1.簡述JSONP跨域原理。利用script標(biāo)簽的src屬性不受同源策略限制，通過動(dòng)態(tài)創(chuàng)建script標(biāo)簽，向服務(wù)器請求一個(gè)JSON數(shù)據(jù)，并在請求的URL中添加一個(gè)回調(diào)函數(shù)名作為參數(shù)。服務(wù)器收到請求后，會將JSON數(shù)據(jù)包裝在回調(diào)函數(shù)中返回給客戶端，客戶端的script標(biāo)簽會執(zhí)行這個(gè)回調(diào)函數(shù)，從而獲取到JSON數(shù)據(jù)。2.簡述CORS跨域流程。簡單請求時(shí)，瀏覽器自動(dòng)添加Origin請求頭，服務(wù)器檢查該請求頭，若允許跨域則設(shè)置Access-Control-Allow-Origin等響應(yīng)頭。復(fù)雜請求時(shí)，瀏覽器先發(fā)送預(yù)檢請求（OPTIONS方法），服務(wù)器確認(rèn)允許跨域相關(guān)信息后，瀏覽器再發(fā)送實(shí)際請求。3.簡述在Vue中使用proxyTable配置跨域的步驟。在config/index.js文件中找到proxyTable配置項(xiàng)。設(shè)置target為目標(biāo)服務(wù)器地址，changeOrigin設(shè)為true表示允許跨域，還可通過pathRewrite重寫路徑。配置完成后重啟開發(fā)服務(wù)器即可生效。4.簡述跨域產(chǎn)生的原因。瀏覽器的同源策略導(dǎo)致跨域問題。同源策略要求協(xié)議、域名、端口都相同的頁面之間才能自由進(jìn)行資源共享和交互。當(dāng)瀏覽器訪問不同源的服務(wù)器資源時(shí)，就會受到限制，從而產(chǎn)生跨域問題。討論題（每題5分，共4題）1.討論JSONP和CORS在實(shí)際項(xiàng)目中的應(yīng)用場景及優(yōu)缺點(diǎn)。JSONP優(yōu)點(diǎn)是兼容性好，缺點(diǎn)是只支持GET請求，安全性差。適用于兼容性要求高且對安全要求不高、數(shù)據(jù)獲取方式為GET的場景。CORS優(yōu)點(diǎn)是支持多種請求方法，安全性能好，缺點(diǎn)是部分舊瀏覽器支持不佳。適用于現(xiàn)代瀏覽器環(huán)境且對請求方法和安全要求高的項(xiàng)目。2.當(dāng)CORS跨域在服務(wù)器端設(shè)置正確但前端仍無法跨域時(shí)，可能有哪些原因？可能原因有：前端請求設(shè)置問題，如未正確設(shè)置請求方法、請求頭；瀏覽器緩存問題，緩存了舊的請求結(jié)果；服務(wù)器配置細(xì)節(jié)問題，如某些特殊字符處理不當(dāng)；網(wǎng)絡(luò)問題，網(wǎng)絡(luò)不穩(wěn)定或存在中間代理服務(wù)器干擾。3.討論在Vue項(xiàng)目中，如何根據(jù)項(xiàng)目特點(diǎn)選擇合適的跨域方案。若項(xiàng)目面向的瀏覽器較舊且對安全要求不高，數(shù)據(jù)獲取多為GET請求，可選擇JSONP。若項(xiàng)目使用現(xiàn)代瀏覽器，對安全和請求方法多樣性要求高，優(yōu)先選擇CORS。若前后端分離且開發(fā)環(huán)境需要簡單