跨域解决方案

通过jsonp跨域
跨域资源共享(CORS)
nodejs中间件代理跨域
nginx反向代理中设置proxy_cookie_domain

Ⅰ.通过jsonp跨域

通常为了减轻Web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

原生实现

服务器端返回如下(返回即执行全局函数)

jsonCallback({"status": 0, "user": "admin"})

jquery方式实现

$.ajax({

url: '***********',

type: 'get',

dataType: 'jsonp', // 请求方式为jsonp

jsonpCallback: "handleCallback", // 自定义回调函数名

data: {}

});

Ⅱ.跨域资源共享(CORS)

CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。

· 简单请求

只要同时满足以下两大条件,就属于简单请求:

请求方法是以下三种方法之一:

· HEAD

· GET

· POST

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.XXXXX.com:8080', // 代理跨域目标接口
changeOrigin: true,
secure: false, // 当代理某些https服务报错时用
cookieDomainRewrite: 'www.XXXXXX.com' // 可以为false，表示不修改
}],
noInfo: true
}
}

Ⅳ.nginx反向代理中设置

和使用node中间件跨域原理相似。前端和后端都不需要写额外的代码来处理，只需要配置一下Ngnix

server{

监听9099端口

listen 9099;

域名是localhost

server_name localhost;

#凡是localhost:8008/api这个样子的，都转发到真正的服务端地址http://localhost:8008

location ^~ /api {
proxy_pass http://localhost:8008;
}
}

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

Web前端跨域问题

监听9099端口

域名是localhost