通过Nginx代理转发配置实现跨域的方法（API代理转发）

2024-10-21 17:46:17

前言

在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或者请求失败，如下图：

这种后端服务的接口存放在于其他的服务器中，比如在公司内网可以通过http://172.30.1.123:8081/api/getList访问到测试环境中的服务接口。

这种情况的请求就涉及到端口不一样的跨域了，那么我们可以利用Nginx代理请求。

Nginx代理配置参考

首先找到Nginx配置文件：

Windows下路径就是你安装Nginx目录下找，比如我的放在C盘根目录，那就是：c:\nginx\conf\nginx.conf
Mac系统配置文件路径在: /usr/local/etc/nginx/nginx.conf, Finder下通过Shift+Command+G，输入/usr/local/etc/nginx/进入该目录。

在Nginx配置文件中添加如下配置：

server {
 listen 80;
 server_name 127.0.0.1;

 location / {
 proxy_pass http://127.0.0.1:3000;
 }

 location ~ /api/ {
 proxy_pass http://172.30.1.123:8081;
 }
}

上面的配置的可以理解为：

监听80端口（Nginx默认启动了80端口），将http://127.0.0.1的所有请求服务转发到127.0.0.1端口为3000；
将http://127.0.0.1/api/或者http://127.0.0.1/api/getList请求转发到http://172.30.1.123:8081

完成

经过上面的配置我们可以直接通过http://127.0.0.1访问我们的WEB应用（如果采用IP访问），而相关的API请求也会根据我们的Nginx配置进行相应的请求，浏览器端看到的/api/getList请求的是127.0.0.1端口为80的端口，但是实际上这个请求已经被我们的Nginx转发指向http://172.30.1.123:8081/api/getList

优化：

基本的代理功能就像上面如此简单的配置即可。

但是，当我们需要获取真实IP的业务时，还需要添加关于真实IP的配置，如下：

server {
 listen 80;
 server_name 127.0.0.1;

 location / {
 proxy_pass http://127.0.0.1:3000;
 proxy_set_header Host $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }

 location ~ /api/ {
 proxy_pass http://172.30.1.123:8081;
 proxy_set_header Host $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
}

proxy_set_header这个配置是改变HTTP的请求头，而Host是请求的主机名，X-Real-IP是请求的真实IP，X-Forwarded-For表示请求是由谁发起的。

因为我们的Nginx在这里属于代理服务器，通过proxy_set_header配置这些信息目的是让服务端获取到真实的请求头。

友情提示：

Nginx每一条配置语句后面都必须要加分好; 否则会报配置错误，自己还一脸懵逼。

拓展

绑定host

如果你觉得输入IP访问不爽那你可以自己修改host，推荐host修改神器：SwitchHosts。

host修改参考：

127.0.0.1 www.domain.com #改成你需要的任何域名

如果绑定了host，在Nginx配置中当然也可以直接配置你指定的域名，譬如：

server {
 listen 80;
 server_name www.domain.com; #这里将IP改成你的域名
 #...
}

修改host后你可以直接通过你的域名访问，如：http://www.domain.com

关于location

上面的配置你可能会对localtion后面的配置感到疑惑，关于localtion后面的常用的需求有：

localtion / {
 # 所有请求都匹配以下规则
 # 因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求
 # xxx 你的配置写在这里
}

location = / {
 # 精确匹配 / ，后面带任何字符串的地址都不符合
}

localtion /api {
 # 匹配任何 /api 开头的URL，包括 /api 后面任意的, 比如 /api/getList
 # 匹配符合以后，还要继续往下搜索
 # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条
}

localtion ~ /api/abc {
 # 匹配任何 /api/abc 开头的URL，包括 /api/abc 后面任意的, 比如 /api/abc/getList
 # 匹配符合以后，还要继续往下搜索
 # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条
}
以/ 通用匹配, 如果没有其它匹配,任何请求都会匹配到
=开头表示精确匹配
如 A 中只匹配根目录结尾的请求，后面不能带任何字符串。
^~ 开头表示uri以某个常规字符串开头，不是正则匹配
~ 开头表示区分大小写的正则匹配;
~* 开头表示不区分大小写的正则匹配

更多详细localtion的正则匹配规则可参考：nginx配置location总结及rewrite规则写法

后记

笔者也是Nginx的初级使用者，希望通过通俗易懂的方式记录这些知识，分享给有需要的人，一起钻研学习，如有纰漏，欢迎指正，谢谢！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

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反向代理跨域基本配置与常见误区

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

跨域访问控制跨域访问为什么浏览器禁止跨域访问不安全,容易出现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实现跨域使用字体文件的配置详解

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

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

安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 . npm uninstall vue-cli -g 2. 检查 node.js 版本. vue-cli3 需要 node 版本大于8.9.在cmd中输入 node -v 查看版本.如果版本过低,请先去 node官网中下载高版本. 安装脚手架 vue-cli3的包名有 vue-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst
利用Nginx代理如何解决前端跨域问题详析

前言 Nginx(发音同"engine X")是异步框架的网页服务器,也可以用作反向代理.负载平衡器和HTTP缓存. 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发. Web 开发通常使用的是前后端分离的开发模式,即前端和后端分别进行开发,前端通过 Ajax 请求后端的接口,将获取数据将数据渲染到页面上.前端开发会使用脚手架搭建前端开发环境,其底层通常会启动一个本地服务器,通常使用的是 nodejs 的 Express 框架.而后端则是提供接口,一般是放在线
使用Nginx 反向代理来避免 ajax 跨域请求的方法

服务器上 nginx + tomcat ,其中 nginx 监听 80 端口, tomcat 监听 8080 端口. 因为对前端不熟悉,以为用 ajax 就可以不需要 callback ,然而前端的同学说不跨域的情况下才不需要 callback ,让我在返回的 json 里加上.可是我刚刚学会了最基本的 spring-mvc 用法,根本不知道怎么加上 callback 网上到时找到一些可行的代码,差不多这个样子: @RequestMapping(method=RequestMethod.GET,
Nginx解决前端访问资源跨域问题的方法详解

被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停
Vue中跨域及打包部署到nginx跨域设置方法

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈为什么要实现前端跨域一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置
详解vue-cli本地环境API代理设置和解决跨域

前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de
如何利用map实现Nginx允许多个域名跨域

常见的 Nginx 配置允许跨域 server { listen 11111; server_name localhost; location ~ /xxx/xx { if ($request_method = 'OPTIONS') { return 204; } add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Ac
Node中使用http-proxy-middleware实现代理跨域的方法步骤

目录 1.安装代理模块 2.配置代理 1.安装代理模块 cnpm i http-proxy-middleware -S 2.配置代理 const express = require('express'); const app = express(); /* 代理配置 start */ const proxy = require('http-proxy-middleware'); //引入代理模块 const proxyOptions = { target: 'http://127.0.0.1:9

通过Nginx代理转发配置实现跨域的方法（API代理转发）

相关推荐

随机推荐