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

2024-03-21 17:50:15

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

nginx服务器配置解决ajax的跨域问题

在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //" XMLHt
Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true
Nginx跨域使用字体文件的配置方法

今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址. 解决方法在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf,添加以下代码: 复制代码代码如下: location ~* \.(eot|ttf|woff)$ {add_header Access-
Nginx跨域访问场景配置和防盗链详解

跨域访问控制跨域访问为什么浏览器禁止跨域访问不安全,容易出现CSRF攻击! 如果黑客控制的网站B在响应头里添加了让客户端去访问网站A的恶意信息,就会出现CSRF攻击 Nginx如何配置跨域访问 add_header语法 Syntax:add_header name value [always]; Default:- Context:http, server, location, if in location 语法解释: add_header name value [always]; nam
nginx服务器通过配置来解决API的跨域问题

前言最近在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //"
nginx 配置跨域失效修复的方法示例

nginx 配置跨域不生效如下配置 server { listen 80; server_name localhost; # 接口转发 location /api/ { # 允许请求地址跨域 * 做为通配符 add_header 'Access-Control-Allow-Origin' '*'; # 设置请求方法跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 设置是否允许 co
Nginx实现跨域使用字体文件的配置详解

本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块Http_Headers_Module来添加Access-Control-Allow-Origin允许的地址 console报错信息 ccess to Font at 'http://w001.static.akhack.com
通过Nginx代理转发配置实现跨域的方法（API代理转发）

前言在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name.iframe.JSONP.CORS等等,就不详细展开了,涉及到协议.端口不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式. 场景本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或
Nginx配置跨域请求Access-Control-Allow-Origin * 详解

前言当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET
详解Nginx反向代理跨域基本配置与常见误区

跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器.同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决问题的同时,发现网上有些方案的确是存在一些问题,在这里总结一下基本配置,也聊一下常见的配置问题. Ng
详解Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

注,操作系统为 CentOS 6.4 x86_64 , Nginx 是版本是最新版的1.4.2,所以实验用到的软件请点击这里下载: CentOS 6.4下载地址:http://www.jb51.net/softs/78243.html Nginx下载地址:http://www.jb51.net/softs/35633.html 一.前言在前面的几篇博文中我们主要讲解了Nginx作为Web服务器知识点,主要的知识点有nginx的理论详解.nginx作为web服务器的操作讲解.nginx作为LNM
详解Nginx反向代理和负载均衡部署指南

Nginx反向代理和负载均衡部署指南,具体如下: 1. 安装 1) 从Nginx官网下载页面(http://nginx.org/en/download.html)下载Nginx最新版本(目前是1.5.13版本)安装包: 2) 解压后复制到部署目录. 2. 启动和停止Nginx Nginx目前只支持命令行操作,操作前先进入Dos命令环境,并进入Nginx部署目录. 1) 启动Nginx:start nginx 2) 停止Nginx:nginx -s stop 3)修改配置后重启:nginx
详解Nginx反向代理WebSocket响应403的解决办法

在Nginx反向代理一个带有WebSocket功能的Spring Web程序(源代码地址 )时,发现访问WebSocket接口时总是出现403响应,Nginx的配置参考的是官方文档 : http { // ssl 相关配置 ... map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 8020; location /ws { proxy_pass http://some-ip:8
详解Nginx反向代理实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制.毕竟X-Pack是商业版. 下面我将操作如何使用Nginx反向代理实现kibana的认证功能. 先决条件: <Centos 7 源码编译安装 Nginx> 安装Apache Httpd 密码生成工具 $ yum install httpd-tools -y 生成Kibana认证密码 $ mkdir -p /usr/local/nginx/conf/pas
详解Nginx反向代理到Tomcat服务器

在实际生产中,Tomcat服务器一般不单独使用在项目中,对于静态资源的响应Nginx表现的比较好,另外由于nginx是专门用于反向代理的服务器,所以很容易实现将java的请求转发到后端交给tomcat容器处理,而本身用来处理静态资源在Nginx中,一个server {}块往往用来配置一个比较大的项目,一般就是对于一个域名的所有配置,一个server块内一般有多个location来定义多个请求规则,比如域名和根目录配置,静态资源支持,php fastcgi请求,url重写,错误页面配置等多种配置
详解nginx反向代理配置及优化

前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反向代理apache.整个配置安装过程很简单.在考虑高并发的情况下,在安装前就做了些优化.目前配置能抗住3000以上并发.好像不是特别大哦?呵~~ 但足以~~ 只是还有少量499问题..期待有人跟我讨论解决第1部分:安装 1 建立用户及组 /usr/sbin/groupadd www /usr/sbin/useradd -g
详解Nginx反向代理实现会话（session）保持的两种方式

一.ip_hash: ip_hash使用源地址哈希算法,将同一客户端的请求总是发往同一个后端服务器,除非该服务器不可用. ip_hash语法: upstream backend { ip_hash; server backend1.example.com; server backend2.example.com; server backend3.example.com down; server backend4.example.com; } ip_hash简单易用,但有如下问题: 当后端服务器宕
详解javascript如何在跨域请求中携带cookie

目录 1.搭建环境 2.测试同源cookie 3.跨域请求携带cookie 4.总结 5.知识点 1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express = require('express') const app = express() const port = 3001 // 设置`cookie` app.get("/login", (r
Spring Boot详解五种实现跨域的方式

目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.java后端实现CORS跨域请求的方式 1. 返回新的CorsFilter(全局跨域) 2. 重写WebMvcConfigurer(全局跨域) 3. 使用注解 (局部跨域) 4. 手动设置响应头(局部跨域) 5. 使用自定义filter实现跨域一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能

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

相关推荐

随机推荐