好程序员分享Web前端面试题汇总JS篇之跨域问题

好程序员分享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;

}

}

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