好程序员web前端培训分享Web前端面试题汇总JS篇之跨域问题，接着上一篇文章我们继续来探讨web前端面试必备面试题。
跨域解决方案
1.通过jsonp跨域
2.跨域资源共享(CORS)
3. nodejs中间件代理跨域
4. nginx反向代理中设置proxy_cookie_domain
Ⅰ.通过jsonp跨域
通常为了减轻Web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
1.原生实现
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
//传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
document.head.appendChild(script);
//回调执行函数
function jsonCallback(res) {
alert(JSON.stringify(res));
}
</script>
服务器端返回如下(返回即执行全局函数)
jsonCallback({"status": 0, "user": "admin"})
2. jquery方式实现
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', //请求方式为jsonp
jsonpCallback: "handleCallback", //自定义回调函数名
data: {}
});
Ⅱ.跨域资源共享(CORS)
CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。
· 简单请求
只要同时满足以下两大条件,就属于简单请求:
1.请求方法是以下三种方法之一:
·HEAD
·GET
·POST
2. HTTP请求头的信息不超出以下几种字段：
·Accept
·Accept-Language
·Content-Language
·Last-Event-ID
·Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
如果是简单请求,后端处理即可, 前端什么也不用干; 这里注意的是如果前端要带cookie, 前端也需要单独设置
· 原生ajax (前端)
var xhr = new XMLHttpRequest();
//前端设置是否带cookie
xhr.withCredentials = true;
...
·jquery (前端)
$.ajax({
...
xhrFields: {
withCredentials: true //前端设置是否带cookie
},
crossDomain: true, //会让请求头中包含跨域的额外信息，但不会含cookie
...
});
·vue中使用axios (前端)
axios.defaults.withCredentials = true
· 后端node
可以借助koa2-cors快速实现
const path = require('path')
const Koa = require('koa')
const koaStatic = require('koa-static')
const bodyParser = require('koa-bodyparser')
const router = require('./router')
const cors = require('koa2-cors')
const app = new Koa()
const port = 9871
...
//处理cors
app.use(cors({
origin: function (ctx) {
return 'http://localhost:9099'
},
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['t', 'Content-Type']
}))
//路由
app.use(router.routes()).use(router.allowedMethods())
//监听端口
...
Ⅲ.nodejs中间件代理跨域
跨域原理:同源策略是浏览器的安全策略, 不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议， 不会执行js脚本, 不需要检验同源策略,也就不存在跨域问题。
实现思路：通过起一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头cookie中域名,实现当前域下cookie的写入
· 在vue框架下实现跨域
利用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.daxihong.com:8080', //代理跨域目标接口
changeOrigin: true,
secure: false, //当代理某些https服务报错时用
cookieDomainRewrite: 'www.daxihong.com' //可以为false，表示不修改
}],
noInfo: true
}
}
Ⅳ.nginx反向代理中设置
和使用node中间件跨域原理相似。前端和后端都不需要写额外的代码来处理， 只需要配置一下Ngnix
server{
#监听9099端口
listen 9099;
#域名是localhost
server_name localhost;
#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871
location ^~ /api {
proxy_pass http://localhost:9871;
}
}
对于跨域还有挺多方式可以实现，这里就不一一列举了。
网友评论