前端跨域问题各种解决方案

「文末高能」

编辑 | 哈比

什么是跨域

域(Domain)是网络中独立运行的单位,域之间相互访问则需要建立信任关系(即 Trust Relation)。信任关系是连接在域与域之间的桥梁。

当一个域与其他域建立了信任关系后,2 个域之间不但可以按需要相互进行管理,还可以跨网分配资源,使不同的域之间实现网络资源的共享与管理。

跨域访问是指,没有建立信任关系的两个域之间通讯,但是由于安全原因,跨域访问是被各大浏览器所默认禁止的。

哪些属于跨域

浏览器遵循同源次略,非同源即为跨域,非同源分为三种。

host 不一致;

端口不一致;

协议不一致。

上面三种,任意满足一种都是跨域,在请求的时候就会报错。

根据上面的原理,我们可以发现在开发中,我们在浏览器打开的我们本地页面地址和请求地址不在一个源中,所以产生了跨域。

解决跨域的方法和原理

我们知道了跨域的原理,那么开发中,应该如何解决这个问题呢?

反向代理

前面我们了解了,跨域问题的产生是因为浏览器的同源政策造成的,但是服务器与服务器之间的数据交换是没有这个限制。

反向代理就是采用这种方式,建立一个虚拟的代理服务器来接收 internet 上的链接请求,然后转发给内部网络上的服务器,并将从服务器上得到的结果,返回给 internet 上请求链接的客户端。

比如,我们常用的 gulp、grunt、webpack 这些脚手架都是通过这种原理解决的跨域。

具体实现:

1. 使用 gulp 脚手架解决跨域

gulp 中有两个解决跨域的包有 gulp-connect-proxy、http-proxy-middleware,拿 http-proxy-middleware 为例,需要与 gulp-connect 一起使用:

var gulp = require('gulp'); var proxy = require('http-proxy-middleware'); var connect = require('gulp-connect'); gulp.task('server', function() { connect.server({ root: 'app', livereload: true, host: 'localhost', port: "8080", middleware: function(req, res, next) { return [ proxy('/', { target: 'targeturl', changeOrigin: true }) ]; } }); }); gulp.task('default', ['server'], function() { });

2. 使用 grunt 脚手架解决跨域

grunt 和 gulp 其实是类似的,都是需要先连接本地服务,然后设置代理,grunt 使用的的跨域插件是 grunt-connect-proxy,需要与 grunt-contrib-connect 一起使用:

connect: { options: { port: ‘8080‘, hostname: ‘localhost‘, protocol: ‘http‘, open: true, base: { path: ‘./‘, options: { index: ‘html/index.html‘ } }, livereload: true }, proxies: [ { context: ‘/‘ + API_NAME, host: ‘localhost‘, port: ‘8080‘, https: false, changeOrigin: true, rewrite: proxyRewrite } ], default: {}, proxy: { options: { middleware: function (connect, options) { if (!Array.isArray(options.base)) { options.base = [options.base]; } // Setup the proxy var middlewares = [require(‘grunt-connect-proxy/lib/utils‘).proxyRequest]; // Serve static files. options.base.forEach(function (base) { middlewares.push(serveStatic(base.path, base.options)); }); // Make directory browse-able. /*var directory = options.directory || options.base[options.base.length - 1]; middlewares.push(connect.directory(directory)); */ return middlewares; } } } }

3. 使用 grunt 脚手架解决跨域

webpack 如今在前端的三大框架中使用的比较广泛,我们以 vue 为例子,vue-cli 中 config/index.js 中是这样配置代理的:

port: 8090, proxyTable: { '/': { target: targeturl, changeOrigin: true, pathRewrite: { '^/': '/' }, } }

我们可以看到,这三种方式都是需要本地先开启服务的,target 配置请求服务器的地址, Rewrite 配置代理规则, changeOrigin 设为 true 意思是同意将主机头的来源更改为目标 URL。

这种代理解决跨域,前端正常写 ajax 就行。

Jsonp

Jsonp 是通过 web 页面所有拥有 src 属性的标签都拥有跨域能力的属性,使客户端通过像调用脚本一样的方式,调用跨域服务器生成的 js 格式文件来获取数据。

具体实现如下。

服务端代码:

前端端代码:

$.ajax({ async: true, url: "http://localhost:3000/jsonp", type: "GET", dataType: "jsonp", // 返回的数据类型,设置为 JSONP 方式 jsonp: 'callback', // 指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback jsonpCallback: 'xxx', // 设置回调函数名 data: { "uname": 'jsonp', "pwd": "456" }, success: function(response, status, xhr) { console.log(response); }, });

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180222B03JNP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券