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实现反向代理
Sep 20 Servers
Linux安装Nginx步骤详解
Mar 31 Servers
Windows下用Nginx配置https服务器及反向代理的问题
Sep 25 Servers
Apache POI的基本使用详解
Nov 07 Servers
nginx内存池源码解析
Nov 20 Servers
Nginx防盗链与服务优化配置的全过程
Jan 18 Servers
Minikube搭建Kubernetes集群
Mar 31 Servers
nginx lua 操作 mysql
May 15 Servers
Nginx限流和黑名单配置
May 20 Servers
nginx 配置指令之location使用详解
May 25 Servers
git stash(储藏)的用法总结
Jun 25 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
Aug 14 Servers
nginx实现发布静态资源的方法
Nginx中break与last的区别详析
nginx网站服务如何配置防盗链(推荐)
本地通过nginx配置反向代理的全过程记录
nginx优化的六点方法
Mar 31 #Servers
Nginx优化服务之网页压缩的实现方法
Nginx 负载均衡是什么以及该如何配置
Mar 31 #Servers
You might like
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python tkinter实现屏保程序
2019/07/30 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
公休请假条
2014/04/11 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
农业生产宣传标语
2014/10/08 职场文书
应届生简历自我评价
2015/03/11 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python