前端面试被问到如何处理跨域该如何回答?

接下来就是纯干货，小本本记下来哟：

什么是跨域：

跨域产生在发送请求时，当请求服务器和响应服务器不是同一台时，就会产生跨域

非同源的服务器互相访问时，就会产生跨域

浏览器为了数据安全，给XMLHTTPRequest施加了安全限制，只允许页面请求自己服务器的数据

同源：

协议://ip：端口

三者都相同时，就会同源，不会有跨域问题

跨域的解决方案：

1. （主流）vue proxy 代理

2. 选择已有或者新建vue.config.js

3. 根据API接口有几台服务器来决定使用方式

方式1： 默认代理所有接口，适用于后端API接口只有一台的情况

devServer: {

proxy: 'http://16.222.11.186:443'

}

//发送时，不论任何请求工具，只需写接口地址即可，proxy会把所有接口转发到当前服务器

axios.post(’/a’) ==> http://16.222.11.186:44/a

方式2： 如果有请求>=2台服务器的情况（多代理分发模式）

devServer: {

proxy: {

'/key1': {

target: 'http://localhost:3333', //目标接口服务器

ws: true | false, //是否是webscoket代理 true是 false不是

changeOrigin: true, //是否跨域 true

pathRewrite: {

'^/key1': '' //请求路径修改,把区分服务器的key删掉

}

},

'/key2': {

target: 'http://www.taobao.com'

changeOrigin: true,

pathRewrite: {

'^/key2': ''

}

},

...

}

}

//请求方式

axios.get('/key1/login') ==> http://localhost:3333/login

axios.get('/key2/req/map') ==> http://www.taobao.com/req/map

此方式只需要vue服务器配置完即可实现跨域，服务器不需要设置

2. （主流）后端设置允许请求头（让服务器来解决）

（工程师设置自己服务器可允许访问的ip）

3. jsonp（由前端来解决 很古老的一种解决方案）

原理： 利用html标签的开源策略

使用script标签去发送请求

早期原生js和jquery解决跨域的方法

//这里只是jsonp的发送，怎么收服务器接口响应的值呢？

<script src='http://服务器ip:端口/接口?callback=函数'></script>

//接收

函数（res）{

}

标签请求和ajax请求是不一样的，所以后端也要单独处理

这里有前端面试练习题，需要的自行查看哦！
http://www.gtalent.cn/exam/interview/Mk9EBpNWLPY2IJT0