vue框架與koa2服務器實現跨域通信

首先我們在vue中引入axios，

npm install axios --save

在需要用到的頁面引入axios

import axios from "axios";

用axios去請求koa2的服務器（url："http://localhost:3000/"）

            var self=this;
            axios({
                url:"http://localhost:3000/",
                method:"GET",
                data:null
            }).then(function(res){
                console.log(res.data);
            }).catch(function(err){
                console.log(err);
            })    

以上是vue的代碼

以下是koa的代碼

// 導入koa，和koa 1.x不同，在koa2中，我們導入的是一個class，因此用大寫的Koa表示:
const Koa = require('koa2');
// 注意require('koa-router')返回的是函數:
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');//用來解析request中的body，針對post請求
const cors = require('koa-cors');//允許其它域訪問！！！

// 創建一個Koa對象表示web app本身:
const app = new Koa();

// log request URL:
app.use(async (ctx, next) => {
    console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
    ctx.response.body="哈嘍";
    await next();
});

router.get('/', async (ctx, next) => {
    ctx.response.body = `<h1>Index</h1>
        <form action="/signin" method="post">
            <p>Name: <input name="name" value="koa"></p>
            <p>Password: <input name="password" type="password"></p>
            <p><input type="submit" value="Submit"></p>
        </form>`;
});

router.post('/signin', async (ctx, next) => {
    var
        name = ctx.request.body.name || '',
        password = ctx.request.body.password || '';
    console.log(`signin with name: ${name}, password: ${password}`);
    if (name === 'koa' && password === '12345') {
        ctx.response.body = `<h1>Welcome, ${name}!</h1>`;
    } else {
        ctx.response.body = `<h1>Login failed!</h1>
        <p><a href="/">Try again</a></p>`;
    }
});

app.use(cors());//在創建router之前注冊
//koa-bodyparser必須在router之前注冊上
app.use(bodyParser());
// add router middleware:
app.use(router.routes());

// 在端口3000監聽:
app.listen(3000);
console.log('app started at port 3000...');