前端vue项目设置代理服务器解决跨域和利用Mock.js模拟接口

前端开发环境中暂时自我解决跨域问题

方案1：要求后端在测试服务器环境开启允许跨域

方案2：不需要后端处理，前端在开发者模式下，用代理解决跨域
（一般正式部署上线都是由后端进行跨域的响应头的端对端的允许，不会在前端增加一层代理）

例子：利用vue脚手架服务器进行代理访问 /api 的请求
步骤：
1.创建vue.config.js文件
2.文件内容如下

module.exports = {
    
    
    devServer: {
    
    
        proxy: {
    
    
            // 要进行代理的请求
            '/api': {
    
    
                // 真正访问的服务器地址
                target: 'http://localhost:3000',
                // 真正访问的路径
                pathRewrite: {
    
    
                    // 匹配 /api 替换成 空
                    '^/api': ''
                }
            }
        }
    }
};

3.将请求发送给当前vue脚手架运行的地址 ( localhost:8080 )
4.重启vue项目

利用Mock.js模拟接口

mock的文档：http://mockjs.com/

使用步骤：
首先安装mock依赖

npm install mockjs

在 main.js 文件设置 开发模式下引入 mock.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

// 开发环境下引入mock.js
if(process.env.NODE_ENV==='development'){
    
    
    require('@/mock')
}

new Vue({
    
    
    router,
    store,
    render: h => h(App)
}).$mount('#app');

并且在 src 目录下创建 mock 文件夹，在mock文件夹下创建 index.js 文件，设置mock

import Mock from 'mockjs';

// 配置请求延时 单位：毫秒
Mock.setup({
    
    
    timeout: 1000
});

// 配置返回数据 第一个参数是要匹配的url(可以使用正则匹配)，第二个参数是要返回的数据
Mock.mock('/api/user', {
    
    
    username: 'ayaan',
    age: 18,
    gender: '男',
    type: '帅'
});

Mock.mock(/\/api/gis, {
    
    
    msg: '正则匹配',
    // 随机日期时间
    mtime: '@datetime',
    // 随机数,设置范围1~800
    'score|1-800': 800,
    // 随机中文名
    nickname: '@cname'
    // 还有随机url '@url' 、 随机图片 '@image' 、 随机邮箱 '@email'等等
});