nginx反向代理跨域基本配置与常见误区

最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用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的传递与回写。

如果用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,然后通过加斜杠来替换掉好了~

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

【Appetite】ionic3实录(五)基本服务实现

前面章节基本把应用的总体配置完成了,开始进入具体页面的开发,而这些离不开与数据的交互、与用户的反馈操作等。正所谓“兵马未动,粮草先行”,现在封装下基本的服务。

12240
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第三十一天 WebService学习【悟空教程】

简单的网络应用使用单一语言写成,它的唯一外部程序就是它所依赖的数据库。大家想想是不是这样呢?

24240
来自专栏步履前行

Spring Retry

  在我们的业务场景中,经常要调用其他的API来获取信息,比如我们的业务场景需要依赖个人信息来处理,这个时候调用个人信息服务的API,但是由于可能同一时段多方在...

46130
来自专栏用户2442861的专栏

C语言开发Linux下web服务器(支持GET/POST,SSL,目录显示等)

http://blog.csdn.net/yueguanghaidao/article/details/8450938

38120
来自专栏程序员互动联盟

【专业技术】Android如何保证安全?

存在问题: 那么多小伙伴想root,root后好处多多你懂的,那么开发的小伙伴最想关心的是安全机制问题。 解决方案: 我们就以此来了解一下Android 安全...

40360
来自专栏salesforce零基础学习

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取。salesforce 零基础学习(二十四)...

26010
来自专栏Java帮帮-微信公众号-技术文章全总结

Java开发必会框架Struts2第二天

一、封装请求正文到对象中(非常重要) 1、静态参数封装 在struts.xml配置文件中,给动作类注入值。调用的是setter方法。 ? 原因:是由一个stat...

39680
来自专栏程序员互动联盟

【专业技术】Android安全嘛?

安卓有一套自己的安全权限机制,大部分来自linux的权限机制,某些地方也做了延伸,比如linux中的用户概念,在安卓上来说就相当于app。对于一些刚学习安卓的同...

42090
来自专栏小白安全

分享几个绕过URL跳转限制的思路

大家对URL任意跳转都肯定了解,也知道他的危害,这里我就不细说了,过~ 大家遇到的肯定都是很多基于这样的跳转格式 http://www.xxx.x...

88060
来自专栏后台及大数据开发

API接口设计:防参数篡改+防二次请求

API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数

98820

扫码关注云+社区

领取腾讯云代金券