首页
视频
资源
登录
转
nginx反向代理解决跨域请求问题。地运行 nginx反向代理解决跨域
7553
人阅读
2022/9/29 21:17
总访问:
276056
评论:
0
收藏:
1
手机
分类:
随笔
### 一.出现跨域的表现: 项目的前端调用后台接口时候,会报错: ``` No ‘Access-Control-Allow-Origin’ header is present on the requested resource ``` ### 二.出现跨域的原因 前端项目是在本地运行的,但是在调用接口时候,接口的地址是其他域名及端口下的地址,此时就会出现跨域问题。 ### 三.如何解决跨域问题:(使用nginx解决跨域问题) 要点先知: 在使用nginx之前先要明确一下的几个概念: 前端项目,后端项目,以及nginx,这就是三个serve项目,它们只是互相之间交流数据; 三个项目都有自己的ip:port组合,哪怕你是在同一台服务器上启动这三个server,它们的port也是不可能有一样的; 所以,前端项目,不论访问nginx还是访问后端项目,都会产生跨域问题。 ####(1)首先要安装nginx 在官网进行安装,地址是http://nginx.org/en/download.html,然后选择第二个稳定版本,下载即可。 下载完,解压后即可得到目录: 主要的配置文件在文件夹conf的nginx.conf中,想要解决跨域问题就得在此处进行配置。 ####(2)熟悉简单常用的nginx命令 这些命令需要在cmd端切换到 安装nginx的目录下 进行。 ``` start nginx # 启动nginx --启动的时候,有一个终端会闪退说明启动成功 ``` ``` nginx.exe -s reload # 修改配置后需要重启才生效 ``` ``` nginx.exe -s quit # 关闭nginx ``` 第一步,要启动nginx,启动成功后,访问 localhost:8088,可以看到下面这个界面: 此处为什么是locahost:8088呢,这个配置在nginx.conf 中,如下: ![](https://img.tnblog.net/arcimg/15933888556/37df512cc974459bb16ab66858e13236.png) 当你下载完打开后默认的配置是80端口,如果该端口被占用的话,你可以配置其他未被占用的端口,比如我这里就是8088 ####(3)nginx.conf文件配置 目前各个环境下的域名和端口号情况:本地项目在运行的时候,访问的地址是http:loaclhost 3000 用的是3000端口号,配置nginx使用的是8088端口号,也就是http://localhost:8088,我希望http://localhost:3000可以访问到http://test.abc.com这个域名下的接口(可以理解为要调用的一系列接口的公共前缀部分),如果没有通过nginx中转的话,访问时报跨域错误。那该如何解决呢: **1.配置nginx.conf文件** ![](https://img.tnblog.net/arcimg/15933888556/872ab64fd9bd493ba291dda57346c3c9.png) **补充:** tn2>第一大方块:nginx的访问端口可以修改为没被占用的其他端口,这里设置nginx的访问路径是 http://localhost:8088 tn4>第二大方块:注意这里需要添加 proxy_pass 为本地运行的项目地址 http://localhost:3000 !!! 当访问 http://localhost:8088 的时候,location会匹配 ’ / ’ 到文件夹根目录下的index.html文件,但这里添加 proxy_pass 后,访问 http://localhost:8088 的时候会代理到 http://localhost:3000,而且你的访问路径显示的还是 http://localhost:8088 ,内容是 http://localhost:3000的 tn5>第三大方块:这里location匹配的是 访问 http://localhost:8088/api/.* 路径的时候,在proxy_pass填上需要用到的外域api地址 http://test.abc.com/ ,此时就相当于访问: http://test.abc.com/ .* ,但实际上显示在你眼前的还是原来路径: http://localhost:8088/api/.* ,只是你访问这个原路径的时候nginx自动帮你代理到你想要访问的api路径 。但这里有个很重要的细节需要注意: 匹配路径 /api/ 和代理路径 http://test.abc.com/ 后面的斜杠统统都不能少!!!任何一个少了都不行,不信试试,这是nginx的规则。 修改完 nginx.conf 文件后,需要重启nginx ,才会生效 !!! **2.本地项目配置和访问方式:** 在本地项目中,访问接口时,以 /api/.* 这样的格式,然后运行本地项目后(需要先运行),访问 http://locallhost:8088地址,而不是http://localhost:3000。 直接访问http://localhost:3000不会通过nginx中转,而访问http://localhost:8088通过nginx解决了跨域问题。 tn2>就像core项目一样,页面访问core后台,core后台去调用其他网站接口,这样就解决跨域了(在后台直接使用httpclient请求接口是不会跨域的),nginx就可以简化这样一个过程。
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
素衣清颜淡若尘
旧年素颜,君记否
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
随笔
15篇
前端
15篇
.NET
4篇
小程序
2篇
Python
2篇
C++
2篇
数据库
9篇
PHP
1篇
后端
1篇
移动开发
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
公网安备:
50010702506256
欢迎加群
欢迎加群交流技术