摘要：作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。为了提高效率，想到了反向代理来解决这一问题。如何在手机上调试呢手机上不可能直接访问可以把手机和电脑连接到同一个网段，使用电脑的进行访问。
作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。
为了提高效率，想到了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;
有了这个万能反向代理，可以随心所欲的玩转任何网站接口了
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98105.html
摘要：作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。为了提高效率，想到了反向代理来解决这一问题。如何在手机上调试呢手机上不可能直接访问可以把手机和电脑连接到同一个网段，使用电脑的进行访问。 作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。为了提高效率，想到了nginx反向代理来解决这一问题。 接口地址：test.com 访问地址：loca...
摘要：还是回到万能的文件，添加匹配规则实现代理转发设置代理转发通过上面的设置，在重启服务，可以让页面中所有包含字段的请求都转为由服务器去向地址发送请求，从而巧妙的解决了浏览器的跨域问题。 1.Nginx入门与基本操作篇 注：由于服务器是windows系统，所以本文主要讲解Nginx在windows下的操作。 首先下载Nginx 解压缩，我们所有的配置基本都在万能的 nginx/conf/...
摘要：传给微信的参数进行转义其中参数是可以被微信原样返回，这样就可以按你自己的需求完成反向代理了。可以去掉搭建测试环境另一条运维的原则是不要在生产环境上直接改，在测试环境修改并经过测试，测试通过后，再上传到生产环境。 前言 在与第三方系统进行接口开发时,需要不断的改进和测试,以常见的微信登录支付和 Alipay 支付和登录为例. 相对来讲 Alipay 做起来容易一些, 一是接口 SDK 封...
摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。 一、问题背景说明： 编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...
阅读 2756·2021-11-23 09:51
阅读 2719·2021-11-11 17:21
阅读 3422·2021-09-04 16:45
阅读 2675·2021-08-09 13:42
阅读 2444·2019-08-29 18:39
阅读 3196·2019-08-29 14:12
阅读 1577·2019-08-29 13:49
阅读 3600·2019-08-29 11:17
