简单配置nginx去做反向代理,实现跨域请求

简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求。

更多详细配置,参考nginx官方文档

先介绍几个nginx命令

  1. 打开nginx.conf文件

    /usr/local/etc/nginx/nginx.conf
  2. 重新加载配置|重启|停止|退出 nginx

    nginx -s reload|reopen|stop|quit
  3. 打开nginx服务

    nginx

上code:配置nginx.conf的文件

以下是nginx.conf文件里的serve部分

server {
# 配置服务地址
listen 9000;
server_name localhost; # 访问根路径,返回前端静态资源页面
location / {
# 前端代码服务地址
proxy_pass http://localhost:8000/; #前端项目开发模式下,node开启的服务器,根路径下可打开index.html
} # 最简单的API代理配置
# 约定:所有不是根路径下的资源,都是api接口地址。则可代理如下
location /* {
# API 服务地址
proxy_pass http://www.serverA.com; #将真正的请求代理到API 服务地址,即真实的服务器地址,ajax的url为/user/1将会访问http://www.serverA.com/user/1
} # 需要更改rewrite 请求路径的配置
location /api/ {
rewrite ^/api/(.*)$ /$1 break; #所有对后端的请求加一个api前缀方便区分,真正访问的时候移除这个前缀
# API Server
proxy_pass http://www.serverA.com; #将真正的请求代理到serverA,即真实的服务器地址,ajax的url为/api/user/1的请求将会访问http://www.serverA.com/user/1
} error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
  • 配置好nginx.config后,做以下操作。
  1. 启动nginx服务。终端执行:nginx
  2. 前端项目,index.html同级目录起服务,监听8000端口。自然你可以通过http://localhost:8000访问到页面。但是同时,由于访问nginx服务http://localhost:9000的地址,被代理到了http://localhost:8000地址。所以访问http://localhost:9000,也可以访问到此index.html页面。
  3. 项目中,所有接口地址为/或者为http:localhost:9000/的都会被代理到http://www.serverA.com/*去访问。从而实现本地开发环境下跨域请求线上http://www.serverA.com的接口。例如ajax的url是/api/user/1,经过代理后发起的请求url是http://www.serverA.com/api/user/1,达到目的,且没有跨域

关于mac如何安装nginx,并启动nginx服务。可参考他人博客

简单配置nginx反向代理,实现跨域请求的更多相关文章

  1. nginx反向代理实现跨域请求

    nginx反向代理实现跨域请求 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A ...

  2. VUE线上通过nginx反向代理实现跨域

    1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...

  3. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  4. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  5. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  6. Nginx 反向代理解决跨域问题分析

    当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://local ...

  7. 配置apache反向代理进行跨域

    配置apache反向代理 打开配置文件httpd.conf 开启 proxy_http_module 和 proxy_module 模块,将#号删除 #LoadModule proxy_module ...

  8. .NET 反向代理 YARP 跨域请求 CORS

    使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...

  9. nginx反向代理解决跨域问题,使本地调试更方便

    我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...

随机推荐

  1. 我的第一部原创《JavaScript 全栈开发》正式上市了!

    在经过了漫长的创作.审校过程之后,<JavaScript 全栈开发>终于迎来了在各大平台上正式出版的日子,以下是这本书的基本信息: 出品方: 异步社区:https://www.epubit ...

  2. springMVC源码解读笔记

    1: DispatcherServlet 的初始化流程(调用的init方法) a) 初始化spring高级容器,WebApplicationContext(容器初始化12个步骤) Servlet类的i ...

  3. 【NX二次开发】布尔操作

    //布尔操作 //UF_MODL_operations 对两个体执行布尔操作 //UF_MODL_unite_bodies 相加布尔操作,不可保留目标体.工具体 //UF_MODL_unite_bod ...

  4. 【SQLite】教程02-SQLite命令

    获取帮助 sqlite> .help 获得以下帮助: 命令 描述 .backup ?DB? FILE 备份 DB 数据库(默认是 "main")到 FILE 文件. .bai ...

  5. SpringCloud(1)生态与简绍

    一:微服务架构简绍学习目标 1.技术架构的演变,怎么一步步到微服务的:2.什么是微服务,优点与缺点  :3.SOA(面向服务)与MicroServices(微服务)的区别 :4.Dubbo 与Spri ...

  6. Java8的Stream API确实很牛,但性能究竟如何?

    Stream Performance 已经对 Stream API 的用法鼓吹够多了,用起简洁直观,但性能到底怎么样呢?会不会有很高的性能损失?本节我们对 Stream API 的性能一探究竟. 为保 ...

  7. JavaScript 中的 Var,Let 和 Const 有什么区别

    一.var 在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量 注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象 var ...

  8. Java语言实现二维码的生成

    众所周知,现在生活中二维码已经是无处不见.走在街道上,随处可见广告标语旁有二维码,手机上QQ,微信加个好友都能通过二维码的方式,我不知道是什么时候兴起的二维码浪潮,但是我知道,这在我小时候可是见不到的 ...

  9. SpringBoot项目创建流程--SpringMVC

    SpringBoot项目创建步骤 1. 创建SpringBoot工程 (1) File → New → Project → Spring Initilizr (2) Name:MySpringBoot ...

  10. Unity中的.Meta文件

    .meta文件是用于辅助管理Unity资源文件的文件,删除后,Unity会自动生成,里面记录了各个资源Inspector的信息,属性等等,Unity是不会改变源资源文件的,没有意义,它是靠.meta文 ...