Vue + Node 项目中的跨域请求问题

一、项目背景简介

如果你是在使用Vue在做前端项目，那么你肯定对Vue和Node的组合不陌生。无论是在实际的项目中还是我们自己做的Demo中，但凡涉及到API接口请求，都会接触到跨域这一技术名词。

这篇博客介绍的是如何在Vue + Node项目中解决跨域请求的问题，博客中会介绍两种跨域的设置方案，即前端跨域设置和后端跨域设置。

什么是跨域以及跨域的相关解决方案，相信你多多少少都知道点，毕竟这是前端面试题目中常问到的。这里我就假设大家已经知道什么是跨域了，如果你对跨域还不是很了解，可以在简书或CSDN搜索跨域相关问题。

其他的不多说，直接开始吧！

二、前端设置跨域

首先我们先说一下如何在前端设置跨域，其实准确来说应该是在前端设置 跨域代理 。在前端设置跨域的时候，我们是在Webpack中进行配置。需要说明的是： Vue-cli 2.x 版本和 Vue-cli 3.0 版本在Webpack的配置上有些不同，我们这里以 Vue-cli 3.0 为例进行介绍：

如果你之前做过Webpack的相关配置，那么在你项目的根目录中肯定会有一个名为 vue.config.js 的文件，如果没有，那就新建一个。注意该文件是在项目的根目录中，也就是和 src文件夹 同级文件夹。

然后直接复制下面这些代码到你的 vue.config.js 文件中，下面对这些代码进行说明。

module.exports = {
    // 配置跨域代理
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081',    // 你自己的api接口地址
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': '/api/',  
                }
            }
        }
    }
};

上面的代码等同于一下代码：

module.exports = {
    // 配置跨域代理
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081/api',    // 你自己的api接口地址
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': '',  
                }
            }
        }
    }
};

在上述的配置中，我们可以看到两种配置方式的些许不同，这说明跨域代理最终匹配到的api地址是由 target 和 pathRewrite 两个属性共同决定的。

我们在前端设置完成代理之后，就可以跨域请求了，比如下面使用 axios 进行请求的一个例子：

import axios from 'axios';
export default {
    data() {
        return {}
    },
    created() {
        axios({
            method: 'get',
            url: "/api/goods"    
        }).then(data => {
            console.log(data);
        });
    }
};

在我的项目中，前端的端口是 0802 ，后端的端口是 0801 ，我们可以看到上面我们请求的url是 /api/goods ，经过前端跨域代理的处理之后，最终访问的url是http://localhost:8081/api/goods，这样的话，就解决了跨域的问题。

但是需要注意的是，如果这个时候你在开发者工具中查看自己请求的api地址的时候，看到的是http://localhost:8082/api/goods ，但是不要慌，这是没错的，因为跨域代理是在后台对api地址进行重定向的。

三、后端设置跨域

如果你想问：在前端不进行设置跨域行不行，感觉好麻烦，我就是想简简单单的请求一个自己写的api，有没有其他的办法。办法是有的，也就是下面要说的在后端设置跨域请求。

比如我们在后端使用Node写了一个api，在该api之前进行跨域设置，使得在所有域中都可以访问api，代码如下：

var express = require('express');
var app = express();

// api 返回的结果
const goods = {
    name: "goods",
    weight: 200
};

// 设置跨域
app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Headers", "content-type"); //允许的header类型
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS"); //跨域允许的请求方式
    if (req.method.toLowerCase() == 'options')
        res.send(200); //让options尝试请求快速结束
    else
        next();
});

app.get('/api/goods', (req, res) => {
    res.json({
        errno: 200,
        data: goods
    });
});


var server = app.listen(8081, () => {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Server is running at: http://%s:%s', host, port);
})

这样一来，我们就可以在自己的项目中，请求这个api了，但是要注意的是，这个时候我们需要使用该api的 绝对路径 ，比如下面的请求实例：

import axios from 'axios';
export default {
    data() {
        return {}
    },
    created() {
        axios({
            method: 'get',
            url: "http://localhost:8081/api/goods"
        }).then(data => {
            console.log(data);
        });
    }
};

四、总结

通过上面的介绍，我们知道现在有两种配置跨域的方法，那么你可能想问在项目中要使用哪一个呢？

我的建议是：两个同时使用。前端使用跨域代理，能够让我们简化我们的api请求路径。

后端设置跨域，可以让我们的api更加便捷，避免出现跨域请求的问题。同时你也可以在后端跨域的设置中，根据实际需求决定在哪些域中可以请求自己写的api，这样更加安全。