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

本文来自作者 npc光明 在 GitChat 上分享 「前端跨域问题各种解决方案」，「阅读原文」查看交流实录。

「文末高能」

编辑 | 哈比

什么是跨域

域（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 格式文件来获取数据。

具体实现如下。

服务端代码：

router.get('/jsonp', function(req, res, next) {
        var userName = req.query.uname;
        var password = req.query.pwd;
        var data = {
            code: 200,
            user: userName,
            password: password
        }
        res.jsonp(data);
        });

前端端代码：

$.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);
        },
        });

扫描下方二维码，阅读完整原文