vue跨域面試題及答案

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