最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS：
3）无法发送ajax请求
2.跨域的解决方案
0.通过本地的HOST设置
1.通过jsonp跨域
~2.通过document.domian+iframe
3.通过window.name+iframe跨域
4.通过localion.hash+iframe跨域~
5.psotMessage跨域
5.跨域资源共享（CORS）
6.nginx代理跨域
7.nodejs中间代理跨域
8.webSocket协议跨域
2.1 通过本地的HOST设置实现跨域
当你前后端分来开发时，那么前端只需要在开发时请求到服务器的数据即可，而在真正部署的时候，是在同域下部署的，则不会产生跨域问题，那么前端开发者只需要改变本地的HOST配置即可，将本地的默认域映射到服务器的地址
2.2 通过jsonp跨域
通过jsonp跨域实质是动态创建script标签，可以在script标签中src属性下请求一个带参数的网址实现跨域通信
1. 原生实现
服务器返回如下（返回时即是执行前端设置的回调函数handelCallback()
handleCallback({“status”:true,“name”:“admin”})
2.jquery实现
在jQuety封装的$.ajax中有一个dataType属性，如果将该属性设置成“jsonp”，就能实现JSONP跨域了。
3. vue.js
//vue.js
this.$http.jsonp({
params:{},
jsonp:‘handleCallback’
}).then(
(res)=>{
console.log(res)
}
)
4. jsonp实现跨域总结
由于jsonp实现的跨域原理是动态尝试script标签，利用script标签的src不受同源策略的限制，但是使用jsonp的缺点是只能实现get请求，不能实现post请求；
2.3 资源共享跨域（CORS）
- 普通的跨域请求：（即get、post）
就是只要服务器配置即可，前端不需要配置，若需要携带cookie，那么前后端都需要配置（注意：这个cookie为跨域请求接口所在域的cookie）
1.前端设置：
1）使用的时原生ajax
//前端设置是否携带cookie
xhr.withCredentials=true
示例代码：
var xhr=new XMLHttpRequest();
//前端设置是否允许携带cookie
xhr.open(‘get’,‘http://www.domain2.com:8080/login’,true)
xhr.setRequestHeader(‘Content-type’,‘appliction/x-www-form-urlencoded’);
xhr.onreadystatechange=function(){
if(xhr.readyState!==){
return;
}
else{
if(xhr.status>=200&&xhr.status<300){
console.log(xhr.responseText)
}
}
}
2）使用vue框架
- a) 可以使用axios设置：
axios.default.withCredentials=true;
- vue-resource设置：
Vue.http.options.credentials=true
2.后端设置
1）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”);
2）Nodejs后台示例
var http = require(‘http’);
var server = http.createServer();
var qs = require(‘querystring’);
server.on(‘request’, function(req, res) {
var postData = ‘’;
// 数据块接收中
req.addListener(‘data’, function(chunk) {
postData += chunk;
});
// 数据接收完毕
req.addListener(‘end’, function() {
postData = qs.parse(postData);
// 跨域后台设置
res.writeHead(200, {
‘Access-Control-Allow-Credentials’: ‘true’, // 后端允许发送Cookie
‘Access-Control-Allow-Origin’: ‘http://www.domain1.com’, // 允许访问的域（协议+域名+端口）
/*
- 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
- 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
*/
‘Set-Cookie’: ‘l=a;Path=/;Domain=www.domain2.com;HttpOnly’ // HttpOnly的作用是让js无法读取cookie
});
res.write(JSON.stringify(postData));
res.end();
});
});
总结
- 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
- 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
- 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
到此这篇前端跨域的解决方案（前端跨域解决方案面试）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/39794.html