vuecil4使用mock進行前後端分離及axios跨域問題

1.上這裏註冊個號http://rap2.taobao.org

2.創建個倉庫，在倉庫編輯裏可以把團隊成員拉進來

3.編輯接口，寫完以後記得保存，然後就可以看到地址了

4.點進去地址就可以檢查是否好使，然後axios直接訪問這個地址就可以作爲模擬數據了（get方法）

5.post會遇到跨域問題，配置vue.config.js，貼上關鍵代碼

devServer: {
        index: "/user.html", // 運行時，默認打開application1頁面
        // 告訴dev-server在服務器啓動後打開瀏覽器，將其設置true爲打開默認瀏覽器
        open: true,
        host: "localhost",
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            //解決跨域問題
            "/api": {
                //注意這個api是自己取的名，前臺調用的時候需要訪問
                target: "http://rap2api.taobao.org", //訪問的目標地址及端口
                changeOrigin: true, //啓動跨域
                secure: false,
                pathRewrite: {
                    //重寫路徑 比如'/api/aaa/ccc'重寫爲'/aaa/ccc'
                    "^/api": "/app/mock/242737"
                }
            }
        },
        // 配置首頁 入口鏈接
        before: app => {
            app.get("/", (req, res, next) => {
                res.write(`
                                <a target="_self" href="/user.html">user</a>
                                </br>
                                <a target="_self" href="/admin.html">admin</a>
                              `);

                res.end();
            });
        }
    }

6.調用

this.axios
        .post("/api/login")
        .then(res => {
          console.log(res);
        })