前端跨域,不再求人

L。同學發表於2018-01-08
前端跨域

前言

怎麼能是開心呢?那是相當的開心.今天在寫ajax請求的時候需要調後臺的介面,不出意料的跨域了,後臺以這個介面是給app用的為藉口拒絕了我的要求,然而我只能臉上笑嘻嘻心裡媽賣批的給予迴應.以前就跨域這個問題一直很迷糊,雖然有一些方法例如jsonP啊,domain啊等等,但彷彿都有使用的前提條件限制,並不是任何情況下都適用,事實情況是大部分情況用不了.總是依靠後端給設定cors也還是感覺心裡空空的,畢竟不是每個後端都會...到時候還是要把鍋甩給自己.外加個不上進的罪名.還是不求人的比較好.尋尋覓覓了很久,終於實踐成功了一種方法,媽媽再也不用擔心我跨域求後臺的問題.下面就把這種方法教給像我一樣的小白,讓大家從此擺脫跨域的魔咒.

教程開始

  • 安裝node(預設你會這一步)
  • 在你的專案中開啟命令列工具,輸入如下命令
npm install express http-proxy-middleware --save-dev
複製程式碼
  • 在專案根目錄新建一個server.js檔案(檔名任意,習慣用server),裡面寫如下程式碼:
var express = require('express');
var proxyMiddleWare = require("http-proxy-middleware");
var proxyPath = "http://xx.xx.xx:port"; //這裡寫目標後端服務地址,port是埠號.
var proxyOption ={target:proxyPath,changeOrigoin:false}
var app = express();
app.use(express.static('./')); //確認你的index.html是放在專案根目錄下的,否則./後面要加上上級目錄的名字
app.use("/router",proxyMiddleWare(proxyOption)) //router處填寫你請求的伺服器地址後面那一堆.比如完整的url是http://101.201.148.221:8900/api/1/user/three,那router處就填/api/1/user/three.
app.listen(3000, function() {   
    console.log("server start");
});
複製程式碼

別忘了ctrl+s儲存

  • 好了,現在大膽的把你原來ajax請求中的地址改成你自己的本地域,還是那個比方,比如原來要請求的url是這個樣子http://101.201.148.221:8900/api/1/user/three ,現在改成這個樣子 http://127.0.0.1:3000/api/1/user/three.
  • 最後一步,在命令列中敲
node server.js
複製程式碼

如果沒報錯,那我猜你應該是成功了,見證奇蹟的時刻到了.在瀏覽器中輸入127.0.0.1:3000,現在去看你請求的結果吧.

相關文章