JS維護nginx反向代理，媽媽再也不用擔心我跨域了！

清一色天空發表於2017-12-20
JSNginx跨域

一些廢話（直接看程式碼的可跳過）

“跨域了，咋搞啊！”

“問你自己啊，我們後臺不配合解決的。”

“你們寫幾句話就好了啊，cors、jsonp、header ......”

“搞不來！不合法！不安全！......”

“臥槽，這介面又跨域了，我CNMLGB”

“你TM不會自己url-get、form-post、寫nginx代理啊！” ......

幾個月後
複製程式碼

“這介面跨域了！”

“寫反向代理啊，上次你不是弄過嗎？”

“我TM早忘了......”

如果你無論如何都得仍受並面對這樣的後臺小夥伴的話，那這篇文章來解救你了，讓你的nginx配置資訊管理的又簡單，又清晰，而且fork一下github隨時都不會忘了呢~

面向讀者

  1. 無論如何都si不配合跨域的後臺兒子們
  2. 總忘記咋配置nginx代理的前端爸爸們
  3. 老想跨域幹些heiheihei的爬蟲紳士們
  4. 想解決或想了解跨域問題的萌新們 ......

想要達到的目的

  1. 只用一句命令列來執行配置檔案的建立、修改
  2. JS配置簡單明瞭，不會JS的小夥伴懂json格式就能輕易維護

配置內容

  1. 對於水平稍高的朋友們可對程式碼進行二次開發
  2. 跨域不再困難

需要的工具

  • node
  • cmd（命令指示符）

Tips

以下內容會以初學者的角度進行並言簡意賅的方式急速說明，掌握者可以跳著看
複製程式碼

在開始之前您可能需要初步瞭解這些東西

1. 什麼是正向/反向代理

2. 什麼是跨域

1）什麼是正向/反向代理

正向代理：

我要拿C的資料，但請求不到C（例如谷歌），不過我知道B是能請求到C的，於是我去告訴B，B幫我拿回了C的資料，有點翻牆的意思。敲黑板，劃重點（C只知道B是他的小夥伴，並不知道A是誰）

反向代理：

我又要去拿C的資料了，不過這次運氣好，C我能直接訪問到（比如百度），那很棒哦，我自己搭建了個伺服器B，B幫我拿回了C的資料。敲黑板，劃重點（C並不知道B是他的小夥伴，因為AB是一夥的）

2）什麼是跨域

請求非自身(地址||埠)都算跨域
複製程式碼

寫一個非自身地址的AJAX的請求（起步）

步驟一：找介面

首先咋們開始在網站上找各種介面，那我這邊找了一個百度貼吧的post介面

請求頭

貼吧post請求圖 --- 請求頭

請求值

貼吧post請求圖 --- 請求值

返回值

貼吧post請求圖 --- 返回值

步驟二：建立index.html發起AJAX請求

開啟你善用的編輯器直接複製以下程式碼

<!DOCTYPE>
<html>
  <meta charset="UTF-8" />
  <head>
    <title></title>
  </head>
  <body></body>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
    $.ajax({
      type: "post",
      url: "http://tieba.baidu.com/connectmanager/user/updateFlashInfo",
      data: '{"appid":"tieba","cuid":"73118464C47E43476FB3E50ACD8E32C9:FG:1","connection_id":"","lcs_ip":"10.46.235.62","lcs_port":"8891","lcs_fd":"10619","device_type":"21"}',
      async: true,
      success: function (res) {
        document.write(JSON.stringify(res))
      }
    })
  </script>
</html>
複製程式碼

跑服務試試？（這裡是從8020埠開啟的伺服器）

ajax請求

哇塞通啦，200誒！我啥都沒操作只是寫了個$.ajax就通了呀？通個毛......

以上console是標準的跨域error，就算返回200也會被瀏覽器自身給截掉，無論如何success都獲取不到Response裡的值
複製程式碼

開始nginx反向代理（進階）

這裡就不講正常情況下nginx如何配置了，百度很多。 這裡直接附上我的github，大家去下載並且我對以下程式碼進行JS配置講述

（下載是非常必要的，因為在github上我內建了nginx）

Github：https://github.com/gs3170981/nginx_quick

步驟一：配置server.js

1）下載完目錄結構應該是這樣的

這裡我內建了nginx，開不開心。
複製程式碼

目錄結構

2）開啟server.js，裡面大致內容是這樣的

配置內容

3）如果你瞭解過或曾經配過nginx，那你一定很雞凍，沒錯，這裡呈現的就是配置項，意味著以後管理配置檔案只需要修改這兒就OK了，因為有註釋我就不一一解釋了。

注意'/'別寫反了，不然會被轉義報錯

步驟二：執行node命令

1）win+r 開啟你的cmd，cd到nginx所在的目錄（即是下載後所在的目錄）執行

node server

如果cmd沒報錯的話，你的檔案結構應該變成如此了

檔案結構

2）那麼請再執行

nginx

如果你除了關閉啥都點不了的話，說明開啟成功了（老司機一般都不會這樣用...嘿嘿，推薦到目錄下雙擊執行）

步驟三：請求試試！

nginx是伺服器，所以開啟的port必須為js檔案中設定的port

開啟127.0.0.1:8016
複製程式碼

8016伺服器

我擦，咋啥都沒顯示？不是js中都輸出了嗎？我們來看看控制檯

請求

汗，還是跨域了，不過如果你是老手的話，應該已經意識到為什麼開始要講解下什麼是正向/反向代理，因為還少一步

步驟四：最後再戰！

開啟index.html，修改一點點的程式碼

<!DOCTYPE>
<html>
  <meta charset="UTF-8" />
  <head>
    <title></title>
  </head>
  <body></body>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
    $.ajax({
      type: "post",
      url: "connectmanager/user/updateFlashInfo", // 注意這裡改成了相對路徑
      data: '{"appid":"tieba","cuid":"73118464C47E43476FB3E50ACD8E32C9:FG:1","connection_id":"","lcs_ip":"10.46.235.62","lcs_port":"8891","lcs_fd":"10619","device_type":"21"}',
      async: true,
      success: function (res) {
        document.write(JSON.stringify(res))
      }
    })
  </script>
</html>
複製程式碼

A、B是相互認識並在同一伺服器上的，B代理了C，則相當於同在了一個地址下，所以需改成相對路徑

好，儲存重新整理一下

再請求

天啦嚕，好像成功呢了，再看下請求

正確返回

沒有報錯，正確返回了呢！

相關技術連結

該文章運用到了node（fs模組）想多瞭解的，請移步下方連結檢視

CSDN：http://blog.csdn.net/Mcky_Love/article/details/78679291

掘金：https://juejin.im/post/5a28aead6fb9a0450c494bc6

關於

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.csdn.net/mcky_love

github：https://github.com/gs3170981/nginx_quick（好用的話記得加星哦！）

結束語

該功能的實現主歸功於fs的檔案建立便利，此項可用於多種批量檔案/資料夾操作的環境，不單指向開發哦~

相關文章