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

JasonZhang 发布于2019-07-25 14:26 / 1434人阅读

摘要：同时由于跨域了，就想利用的反向代理去处理一下跨域，但是在解决问题的同时，发现网上有些方案的确是存在一些问题，在这里总结一下基本配置，也聊一下常见的配置问题。

最近公司前后端分离，前端独立提供页面和静态服务很自然的就想到了用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，然后通过加斜杠来替换掉好了～

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

云服务器 idc机房托管阿里云跨域与反向服务器代理 nginx反向代理 nginx 反向代理cdn nginx反向代理https

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40102.html

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

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

lindroid 2019-08-23 11:34 评论0 收藏0
CORS跨域与Nginx反向代理跨域优劣对比

摘要：最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括和反向代理。反向代理此时后端相当于不跨域，和正常请求一致，无需额外配置。最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括CORS和Nginx反向代理。这两种方案项目中都有在用，各有优缺，关于具体使用哪种方案，大家的观点也不大一致，本文主要就此展开一下，从前后端及服务...

yiliang 2019-07-25 14:26 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
Nginx反向代理理解误区之proxy_cookie_domain

摘要：但是对于一些设置了的项目，比如这种情况下当你用做反向代理的时候，就必须要转换一下了。多学习，多去关注一些底层的原理，才会发现自己理解的错误，望诸君共勉如果错误，欢迎指出基本内容 Nginx做反向代理的时候，我们一般习惯添加proxy_cookie_domain配置，来做cookie的域名转换，比如 ... location /api { proxy_pass https://b...

岳光 2019-07-25 14:38 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0