2024年最全前端常见跨域解决方案（全）(3)，Web前端基础面试题2024

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

二、 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：(http://www.domain.com/a.html)

2.）子窗口：(http://child.domain.com/b.html)

三、 跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1、 前端设置：

1.）原生ajax

// 前端设置是否带cookie

xhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); //

// 前端设置是否带cookie

xhr.withCredentials = true;

xhr.open(‘post’, ‘http://www.domain2.com:8080/login’, true);

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

xhr.send(‘user=admin’);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

2.）jQuery ajax

$.ajax({

…

xhrFields: {

withCredentials: true // 前端设置是否带cookie

},

crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie

…

});

2、 服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）php后台：

<?php header("Access-Control-Allow-Origin:*"); ?>

2.）Java后台：

/*

• 导入包：import javax.servlet.http.HttpServletResponse;

• 接口参数中定义：HttpServletResponse response

*/

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加’/’

response.setHeader(“Access-Control-Allow-Origin”, “http://www.domain1.com”);

// 允许前端带认证cookie：启用此项后，上面的域名不能为’*'，必须指定具体的域名，否则浏览器会提示

response.setHeader(“Access-Control-Allow-Credentials”, “true”);

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头

response.setHeader(“Access-Control-Allow-Headers”, “Content-Type,X-Requested-With”);

四、Nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

1、 非vue框架的跨域（2次跨域）

利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.）前端代码示例：

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie

xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器

xhr.open(‘get’, ‘http://www.domain1.com:3000/login?user=admin’, true);

xhr.send();

2.）中间件服务器：

var express = require(‘express’);

var proxy = require(‘http-proxy-middleware’);

var app = express();

app.use(‘/’, proxy({

// 代理跨域目标接口

target: ‘http://www.domain2.com:8080’,

changeOrigin: true,

// 修改响应头信息，实现跨域并允许带cookie

onProxyRes: function(proxyRes, req, res) {

res.header(‘Access-Control-Allow-Origin’, ‘http://www.domain1.com’);

res.header(‘Access-Control-Allow-Credentials’, ‘true’);

},

// 修改响应信息中的cookie域名

cookieDomainRewrite: ‘www.domain1.com’ // 可以为false，表示不修改

}));

app.listen(3000);

console.log(‘Proxy server is listen at port 3000…’);

3.）Nodejs后台同（六：nginx）

2、 vue框架的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

module.exports = {

entry: {},

module: {},

…

devServer: {

historyApiFallback: true,

proxy: [{

context: ‘/login’,

target: ‘http://www.domain2.com:8080’, // 代理跨域目标接口

changeOrigin: true,

secure: false, // 当代理某些https服务报错时用

cookieDomainRewrite: ‘www.domain1.com’ // 可以为false，表示不修改

}],

noInfo: true

}

}

五、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，我们使用http://Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.）前端代码：

user input：