資訊專欄INFORMATION COLUMN
摘要：作為前端開發，每次調試接口，把代碼發到測試服務器，是很費時費事的一件事情。為了提高效率，想到了反向代理來解決這一問題。如何在手機上調試呢手機上不可能直接訪問可以把手機和電腦連接到同一個網段，使用電腦的進行訪問。
作為前端開發，每次調試接口，把代碼發到測試服務器，是很費時費事的一件事情。
為了提高效率，想到了nginx反向代理來解決這一問題。
接口地址：
test.com
訪問地址：
localhost
最核心的問題就是，登錄時，無法寫入cookie的問題，為了解決這個問題，走了不少彎路。
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 10;
server {
listen 80;
server_name localhost;
location =/ {
add_header X-Frame-Options SAMEORIGIN;
root D:/workspace/;
index index.html;
}
location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
charset utf-8;
root D:/workspace/;
expires 3d;
}
location = /socket/v2 {
proxy_pass http://test.com;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_buffer_size 256k;
proxy_buffers 4 256k;
}
location / {
proxy_pass http://test.com;
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
}
}
}
核心代碼在三行代碼上：
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header Host test.com;
具體解釋我也是一知半解：
第一個是攜帶cookie，
第二個設置cookie 的 domain
第三個 設置真實的host
如何在手機上調試呢？
手機上不可能直接訪問localhost,可以把手機和電腦連接到同一個網段，使用電腦的ip進行訪問。
但是這里只代理了localhost,并沒有代理電腦的ip
所以，需要把是上面的server{...}拷貝一份，只需要把里面的localhost全部改成你的電腦ip就可以了，最終代碼：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 10;
server {
listen 80;
server_name localhost;
location =/ {
add_header X-Frame-Options SAMEORIGIN;
root D:/workspace/;
index index.html;
}
location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
charset utf-8;
root D:/workspace/;
expires 3d;
}
location = /socket/v2 {
proxy_pass http://test.com;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_buffer_size 256k;
proxy_buffers 4 256k;
}
location / {
proxy_pass http://test.com;
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
}
}
server {
listen 8080;
server_name xx.xx.xx.xx;
location =/ {
add_header X-Frame-Options SAMEORIGIN;
root D:/workspace/;
index index.html;
}
location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
charset utf-8;
root D:/workspace/;
expires 3d;
}
location = /socket/v2 {
proxy_pass http://test.com;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_buffer_size 256k;
proxy_buffers 4 256k;
}
location / {
proxy_pass http://test.com;
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com xx.xx.xx.xx;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host test.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
}
}
}
訪問方法：
http://xx.xx.xx.xx:8080 即可
如果是打包工具生成增這個配置的話，可以用nodejs動態獲取你電腦的ip
function? getIPAdress() {??????
var? interfaces? = ?require("os").networkInterfaces();??????
for (var? devName? in ?interfaces) {????????????
var? iface? = ?interfaces[devName];????????????
for (var? i = 0; i < iface.length; i++) {?????????????????
var? alias? = ?iface[i];?????????????????
if (alias.family? === ?"IPv4"? && ?alias.address? !== ?"127.0.0.1"? && ?!alias.internal) {???????????????????????
return? alias.address;
}????????????
}??????
}??
}
所以，這里貼出來一個動態生成nginx.config的工具
function buildNginxConfig(config) {
function? getIPAdress() {??????
var? interfaces? = ?require("os").networkInterfaces();??????
for (var? devName? in ?interfaces) {????????????
var? iface? = ?interfaces[devName];????????????
for (var? i = 0; i < iface.length; i++) {?????????????????
var? alias? = ?iface[i];?????????????????
if (alias.family? === ?"IPv4"? && ?alias.address? !== ?"127.0.0.1"? && ?!alias.internal) {???????????????????????
return? alias.address;?????????????????
}????????????
}??????
}??
}
var cwd = process.cwd().replace(//g, "/") + "/app";
var protocol = /https|443/.test(config.ip) ? "https" : "http";
var servers = [{
browserIp: "localhost",
port: 80,
root: cwd,
serverIp: config.ip,
protocol: protocol,
}, {
browserIp: getIPAdress(),
port: 8080,
root: cwd,
serverIp: config.ip,
protocol: protocol,
}].map(function(item) {
return `
server {
listen ${item.port};
server_name ${item.browserIp};
location =/ {
add_header X-Frame-Options SAMEORIGIN;
root ${item.root};
index index.html;
}
location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
charset utf-8;
root ${item.root};
expires 3d;
}
location = /socket/v2 {
proxy_pass ${item.protocol}://${item.serverIp};
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host ${item.serverIp};
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_buffer_size 256k;
proxy_buffers 4 256k;
}
location / {
proxy_pass ${item.protocol}://${item.serverIp};
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain ${item.serverIp} ${item.browserIp};
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host ${item.serverIp};
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
}
}`;
}).join("
");
var str = `worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 10;
${servers}
}`;
return str;
}
exports = module.exports = buildNginxConfig;
有了這個萬能反向代理，可以隨心所欲的玩轉任何網站接口了
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40147.html
摘要：作為前端開發，每次調試接口，把代碼發到測試服務器，是很費時費事的一件事情。為了提高效率，想到了反向代理來解決這一問題。如何在手機上調試呢手機上不可能直接訪問可以把手機和電腦連接到同一個網段，使用電腦的進行訪問。 作為前端開發，每次調試接口，把代碼發到測試服務器，是很費時費事的一件事情。為了提高效率，想到了nginx反向代理來解決這一問題。 接口地址：test.com 訪問地址：loca...
摘要：還是回到萬能的文件，添加匹配規則實現代理轉發設置代理轉發通過上面的設置，在重啟服務，可以讓頁面中所有包含字段的請求都轉為由服務器去向地址發送請求，從而巧妙的解決了瀏覽器的跨域問題。 1.Nginx入門與基本操作篇 注：由于服務器是windows系統，所以本文主要講解Nginx在windows下的操作。 首先下載Nginx 解壓縮，我們所有的配置基本都在萬能的 nginx/conf/...
摘要：傳給微信的參數進行轉義其中參數是可以被微信原樣返回，這樣就可以按你自己的需求完成反向代理了。可以去掉搭建測試環境另一條運維的原則是不要在生產環境上直接改，在測試環境修改并經過測試，測試通過后，再上傳到生產環境。 前言 在與第三方系統進行接口開發時,需要不斷的改進和測試,以常見的微信登錄支付和 Alipay 支付和登錄為例. 相對來講 Alipay 做起來容易一些, 一是接口 SDK 封...
摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。 一、問題背景說明： 編寫移動前端頁面時需要訪問后臺系統接口。前端項目在本地（個人辦公電腦）開發，后臺接口存放后生產的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...
閱讀 3675·2021-11-16 11:41
閱讀 2880·2021-09-23 11:45
閱讀 687·2019-08-30 15:44
閱讀 538·2019-08-30 13:10
閱讀 1961·2019-08-30 12:49
閱讀 3526·2019-08-28 17:51
閱讀 1471·2019-08-26 12:20
閱讀 698·2019-08-23 17:56
