更多课程 选择中心

Web培训
美国上市教育机构

400-111-8989

Web培训

Web前端面试题汇总之JS篇(二)

  • 发布:Web前端培训
  • 来源:小小张 程序员成长指北
  • 时间:2019-05-28 17:39

跨域问题有哪些处理方式

今天小编要跟大家分享的文章是关于Web前端面试题JS中关于跨域问题有哪些处理方式的相关知识。如果你想参加Web前面面试,正在做面试准备,就来看一看小编今天为大家准备的文章吧!

Web前端面试题汇总之JS篇(二)

跨域解决方案

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;

}

}

对于跨域还有挺多方式可以实现, 这里就不一一列举了。

以上就是小编今天为大家分享的关于Web前端面试题汇总之JS篇(二)关于跨域问题有哪些处理方式的文章,希望本篇文章能够对正准备参加Web前端面试的小伙伴们有所帮助。想要了解更多Web前端面试相关知识记得关注达内Web培训官网,小编将继续为大家推荐相关面试题!最后祝愿小伙伴们能够面试成功,顺利找到工作!

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:web前端面试题汇总之JS篇(一)
下一篇:Web前端面试题汇总之JS篇(三)

Web前端面试题汇总之JS篇(五)

Web前端面试题汇总之JS篇(四)

Web前端面试题汇总之JS篇(三)

Web前端面试题汇总之JS篇(二)

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省