最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器。同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决问题的同时,发现网上有些方案的确是存在一些问题,在这里总结一下基本配置,也聊一下常见的配置问题。


Nginx接口服务反向代理基本配置

server {
listen 8443; # 监听的端口号
server_name a.test.com; # 服务器名称
client_max_body_size 100m; # 定义读取客户端请求头的超时时间
ssl on;
ssl_certificate test.pem;
ssl_certificate_key test.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM;
ssl_prefer_server_ciphers on;
location / {
root /test-static-app; # 静态资源目录
index index.html index.htm;
try_files $uri $uri/ /index.html; # 动态解析目录,配合vue的history模式
}
}

基本配置实现了页面及静态服务器的基本功能,并可以实现使用vue的history模式时的路由解析。进一步的,为了实现向接口服务器的统一转发,我们需要和后端开发人员规定接口名的前缀,比如所有接口的相对路径都以api开头,此时我们可以添加如下配置(和上一个location平级),

...
location /api {
proxy_pass https://b.test.com; # 设置代理服务器的协议和地址
proxy_cookie_domain b.test.com a.test.com; # 修改cookie,针对request和response互相写入cookie
}
...

其中主要依赖proxy_pass,实现将a.test.com下的/api/x接口转发到了b.test.com下面,这个过程大致如下

cookie的交互主要就是proxy_cookie_domain,加上下面这段

proxy_cookie_domain b.test.com  a.test.com;

这个实现了,a.test.com和b.test.com域名之间cookie的传递与回写。这里解释有点问题,具体内容详见Nginx反向代理理解误区之proxy_cookie_domain

如果用node来模拟一下的话,大致如下

module.exports =  (router) => {
router.get('/api/index/getCmsInfo', async function (ctx, next) {
// 接口转发
let result = await superagent.post('https://b.test.com/api/card/home').set(browserMsg)
// 获取返回的set-cookie,并设置header
let setCookie = result.headers['set-cookie']
if (setCookie) {
ctx.response.header['set-cookie'] = setCookie
}
// 返回
ctx.response.body={
success: true,
result: result.body
}
})
}

综上nginx反向代理的本质其实就是接口服务的转发与header的处理,仔细想想也就容易理解了。

常见误区

1、无用的ACA-Header ?

网上很多的nginx跨域设置里面都加了跨域header设置相关的内容,比如

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' "true";
add_header 'Access-Control-Allow-Headers' 'X-Requested-With';

想想上面的原理,各位看官觉得这个还有用么?ACA(Access-Control-Allow-)系列的header本身是为了cors中做协商跨域而配置的,在这里配这个纯属脱裤子放屁多此一举。

2、proxy_pass 域名带不带‘斜杠/’ ?

同样的,在网上看到了有的网友在配置proxy_pass的时候,会在后面加一个斜杠,如下,然后说报错啦,找不到接口啦~咋整啊~

...
location /api {
#proxy_pass https://b.test.com;
proxy_pass https://b.test.com/;
}
...

看到这个我们来想一想哈,proxy_pass的作用是抓发,加了斜杠意味着所有的/api请求都会转发到根目录下,也就是说 /api 会被 / 替代,这个时候接口路径就变了,少了一层/api。而不加斜杠的时候呢?这代表着转发到b.test.com 的域名下,/api的路径不会丢失。

针对这种情况,如果后端接口统一有了规定前缀,比如/api,那你这里就不要配置斜杠了。另一种情况,后端接口shit一样,没有统一前缀,这边又要区分,那就在前端所有接口都加一个统一前缀,比如/api,然后通过加斜杠来替换掉好了~

以上就是本次的全部内容了~今天的《新闻联播》播送完了,谢谢收看,再见~再见~

nginx反向代理跨域基本配置与常见误区的更多相关文章

  1. CORS跨域与Nginx反向代理跨域优劣对比

    最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...

  2. (三)ajax请求不同源之nginx反向代理跨域

    一.基本原理 nginx是一个高性能的web服务器,常用作反向代理服务器.nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上. 用nginx反向代理实现跨域,是最简单的跨域方 ...

  3. nginx 反向代理及 https 证书配置

    nginx 反向代理及 https 证书配置 author: yunqimg(ccxtcxx0) 1. 编译安装nginx 从官网下载 nginx源码, 并编译安装. ./configure --pr ...

  4. Nginx反向代理实现负载均衡配置图解

    Nginx反向代理实现负载均衡配置图解 [导读] 负载均衡配置是超大型机器需要考虑的一些问题,同时也是数据安全的一种做法,下面我来介绍在nginx中反向代理 负载均衡配置图解,大家可参考本文章来操作. ...

  5. Nginx反向代理以及负载均衡配置

    项目地址:http://git.oschina.net/miki-long/nginx 前提:最近在研究nginx的用法,在windows上小试了一下,由于windows下不支持nginx缓存配置,所 ...

  6. nginx反向代理负载均衡初次配置

    反向代理,我个人理解是通过一台反向代理服务器,把客户端的把有请求按照一定的规则分发给后台的服务器.nginx作反向代理服务器的虚拟机配置如下: upstream itest { #正常情况下应该作如下 ...

  7. nginx 反向代理实现负载均衡*配置实战

    重要点: 1配置反向代理多虚拟主机节点服务器 2经过反向代理后的节点服务器记录用户IP 3与反向代理配置相关的更多参数说明 4根据URL目录地址转发 (1)根据URL中的目录地址实现代理转发(动静分离 ...

  8. Nginx反向代理,负载均衡配置

    主配置文件:nginx.conf # For more information on configuration, see: # * Official English Documentation: h ...

  9. Nginx反向代理与Backend直接配置长连接

    使用了Nginx的反向代理配置如下: upstream test{ keepalive 1; server 192.168.1.63:4000; } server { listen 4000; ser ...

随机推荐

  1. sql中根据逗号分隔,查出多行数据

    --sql中根据逗号分隔,查出多行数据 select       a.DiscussID,b.LocationID  from       (select DiscussID,LocationID=c ...

  2. sql先分组,再算百分比

    --先分组,再算百分比 SELECT  a.CooperationIntention ,         a.OrganizationID ,         COUNT(*) 数量 , CONVER ...

  3. C# 分页方法

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...

  4. Json.Net组件指定/忽略序列化字段属性技巧知识点

    我们在用Json.Net序列化组件序列化类的时候,经常有这样的一个需求:指定被序列化类中的某些字段属性是要忽略的,或者是指定字段属性序列化 比如下面这个类: public class Bar { pu ...

  5. MySQL5:触发器

    什么是触发器 MySQL的触发器(trigger)和存储过程一样,都是嵌入到MySQL中的 一段程序.触发器是由事件来触发某个操作,这些事件包括INSERT.UPDATE和DELETE语句.如果定义了 ...

  6. Java泛型类型

    E element 常用于集合中表示存放元素 T type Java类 K key 键 V value 值 N number 数值类型 ? 不确定的类型 一种约定俗成吧

  7. Myeclipse安装与破解

    安装包+破解包 链接:https://pan.baidu.com/s/1G4mYsTOMDixyr2UmdqqY5A 提取码:a2n8 红色框框内的是安装包,蓝色框框内的是破解包 安装过程中比较简单, ...

  8. JDBC进行事务管理

    JDBC进行事务管理 事务的四个特征:原子性 : 是指事务中包含的操作都被看做是一个逻辑单元一致性: 开始前和结束后数据库都处于一致性状态隔离性: 对数据库修改的多个事务是彼此隔离的持久性 事务完成之 ...

  9. nodejs中创建web服务,监听本地IP

    nodejs官网例子 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {' ...

  10. 小程序视图层(xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...