跨域解决方案

2019-06-20

通过jsonp跨域
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建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));
}

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

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

jquery方式实现:

$.ajax({
  url: 'xxxxxx',
  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 (前端)

1	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反向代理中设置proxy_cookie_domain

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

server{
  # 监听9099端口
  listen 9099;
  # 域名是localhost
  server_name localhost;
  #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871
  location ^~ /api {
    proxy_pass http://localhost:9871;
  }
}

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

一个爱听歌的搬砖工

跨域解决方案