前端跨域的解决方案（前端跨域解决方案面试）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h4>最后</h4>

讯享网

推荐一些系统学习的途径和方法。

路线图
讯享网

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

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跨域了。</p> <h6>3. vue.js</h6> <p>//vue.js</p> <p>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();

});

总结

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。