實現(xiàn)跨域ajax請求的方式有很多，其中一個是利用CORS，而這個方法關(guān)鍵是在服務(wù)器端進行配置。

本文僅對能夠完成正常跨域ajax響應(yīng)的，最基本的配置進行說明（深層次的配置我也不會）。

CORS將請求分為簡單請求和非簡單請求，可以簡單的認(rèn)為，簡單請求就是沒有加上額外請求頭部的get和post請求，并且如果是post請求，請求格式不能是application/json（因為我對這一塊理解不深如果錯誤希望能有人指出錯誤并提出修改意見）。而其余的，put、post請求，Content-Type為application/json的請求，以及帶有自定義的請求頭部的請求，就為非簡單請求。

簡單請求的配置十分簡單，如果只是完成響應(yīng)就達(dá)到目的的話，僅需配置響應(yīng)頭部的Access-Control-Allow-Origin即可。

如果我們在http://localhost:3000 域名下想要訪問 http://127.0.0.1:3001 域名。可以做如下配置：

app.use(async (ctx, next) => { ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000'); await next();});

然后用ajax發(fā)起一個簡單請求，例如post請求，就可以輕松的得到服務(wù)器正確響應(yīng)了。

實驗代碼如下：

$.ajax({  type: 'post',  url: 'http://127.0.0.1:3001/async-post' }).done(data => {  console.log(data);})

服務(wù)器端代碼：

router.post('/async-post',async ctx => { ctx.body = { code: "1", msg: "succ" }});

然后就能得到正確的響應(yīng)信息了。

這時候如果看一下請求和響應(yīng)的頭部信息，會發(fā)現(xiàn)請求頭部多了個origin（還有一個referer為發(fā)出請求的url地址），而響應(yīng)頭部多了個Access-Control-Allow-Origin。

現(xiàn)在可以發(fā)送簡單請求了，但是要想發(fā)送非簡單請求還是需要其他的配置。

當(dāng)?shù)谝淮伟l(fā)出非簡單請求的時候，實際上會發(fā)出兩個請求，第一次發(fā)出的是preflight request，這個請求的請求方法是OPTIONS，這個請求是否通過決定了這一個種類的非簡單請求是否能成功得到響應(yīng)。

為了能在服務(wù)器匹配到這個OPTIONS類型的請求，因此需要自己做一個中間件來進行匹配，并給出響應(yīng)使得這個預(yù)檢能夠通過。

app.use(async (ctx, next) => { if (ctx.method === 'OPTIONS') { ctx.body = ''; } await next();});

這樣OPTIONS請求就能夠通過了。

如果檢查一下preflight request的請求頭部，會發(fā)現(xiàn)多了兩個請求頭。

Access-Control-Request-Method: PUTOrigin: http://localhost:3000

要通過這兩個頭部信息與服務(wù)器進行協(xié)商，看是否符合服務(wù)器應(yīng)答條件。

很容易理解，既然請求頭多了兩個信息，響應(yīng)頭自然也應(yīng)該有兩個信息相對應(yīng)，這兩個信息如下：

Access-Control-Allow-Origin: http://localhost:3000Access-Control-Allow-Methods: PUT,DELETE,POST,GET