Nginx解决前端访问资源跨域问题的方法详解


Posted in Servers onMarch 31, 2021

被前端跨域问题折磨快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

在停止ngix后,会自动删除/logs目录下的nginx.pid

  • 可以使用命令nginx -c conf/nginx.conf 重新创建 或者 再次启动nginx

查看nignx 监听端口 是否启动成功

  • netstat -ano | findstr 端口号

解决关闭nignx后 端口仍在监听中

1、netstat -ano | findstr 端口号 #获取到PID

2、tasklist | findstr "PID" #命令找到nginx进程信息

3、taskkill /f /t /im nginx.exe #结束nginx进程

2、介绍如何配置Nignx 解决跨域问题

前端ip端口号:http://localhost:8080/

后端ip端口号:http://localhost:8082/

现在我们在不做跨域设置时,前端请求如下

uni.request({
  url:'http://localhost:8082/ApiController/test',
  success:(res)=>{
  console.log(res.data)
  },
})

访问地址:'http://localhost:8082/ApiController/test',就会出现

Nginx解决前端访问资源跨域问题的方法详解

那么我们进行Nignx配置

编辑 /config/nginx.conf此文件

1)添加头信息,在nginx.conf配置文件http块中添加跨域访问配置

add_header Access-Control-Allow-Origin *; //允许所有域名跨域访问代理地址
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //跨域请求访问请求方式,

2)设置反向代理

server {
  listen  80; #配置nignx的监听端口
  server_name localhost; #配置nignx的监听地址
  location /ApiController{ #监听地址 以/ApiController开头的地址
   proxy_pass http://localhost:8082; #转发地址
  }
}

此时配置后我们前端访问url

http://localhost:8082/ApiController/test 应修改为http://localhost:80/ApiController/test

#此时监听

以localhost为域名

以80为端口

以/ApiController为地址开头

才会进行地址转发

uni.request({
   url:'http://localhost:80/ApiController/test',
   success:(res)=>{
   console.log(res.data)
   },
})

结果:(访问成功)

Nginx解决前端访问资源跨域问题的方法详解

总结

到此这篇关于Nginx解决前端访问资源跨域问题的文章就介绍到这了,更多相关Nginx解决前端访问资源跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
nginx处理http请求实现过程解析
Mar 31 Servers
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
May 26 Servers
Nginx配置之实现多台服务器负载均衡
Aug 02 Servers
Nginx使用Lua模块实现WAF的原理解析
Sep 04 Servers
在Docker容器中部署SQL Server
Apr 11 Servers
Windows server 2012 配置Telnet以及用法详解
Apr 28 Servers
Windows Server 2012配置DNS服务器的方法
Apr 29 Servers
Nginx利用Logrotate实现日志分割
May 20 Servers
聊聊配置 Nginx 访问与错误日志的问题
May 25 Servers
nginx设置资源请求目录的方式详解
May 30 Servers
永中文档在线转换预览基于nginx配置部署方案
Jun 10 Servers
Nginx报错104:Connection reset by peer问题的解决及分析
Jul 23 Servers
nginx实现发布静态资源的方法
Nginx中break与last的区别详析
nginx网站服务如何配置防盗链(推荐)
本地通过nginx配置反向代理的全过程记录
nginx优化的六点方法
Mar 31 #Servers
Nginx优化服务之网页压缩的实现方法
Nginx 负载均衡是什么以及该如何配置
Mar 31 #Servers
You might like
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
javascript 写类方式之九
2009/07/05 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python感知机实现代码
2019/01/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
Python如何读写二进制数组数据
2020/08/01 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
2014年高考决心书
2014/03/11 职场文书
师范生求职信
2014/06/14 职场文书
鼓舞士气的口号
2014/06/16 职场文书
创先争优个人总结
2015/03/04 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android