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

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

“跨域了，咋搞啊！”
“問你自己啊，我們後臺不配合解決的。”
“你們寫幾句話就好了啊，cors、jsonp、header ……”
“搞不來！不合法！不安全！……”
“臥槽，這接口又跨域了，我CNMLGB”
“你TM不會自己url-get、form-post、寫nginx代理啊！”
……

幾個月後

“這接口跨域了！”
“寫反向代理啊，上次你不是弄過嗎？”
“我TM早忘了……”

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

面向讀者

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

想要達到的目的

只用一句命令行來執行配置文件的創建、修改
JS配置簡單明瞭，不會JS的小夥伴懂json格式就能輕易維護
對於水平稍高的朋友們可對代碼進行二次開發
跨域不再困難

需要的工具

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接口

請求頭

請求值

返回值

步驟二：創建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端口開啓的服務器）

哇塞通啦，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

我擦，咋啥都沒顯示？不是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，則相當於同在了一個地址下，所以需改成相對路徑

好，保存刷新一下

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

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

關於

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

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

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

結束語

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