欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  网络运营

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

程序员文章站 2022-07-09 17:46:45
被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下。该篇只探讨如何用ngnx解决跨域问题,对于原理不作讨论。1、首先介绍windows环境下nignx的相关命令操作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

在停止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/

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

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

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

那么我们进行nignx配置

编辑 /config/nginx.conf此文件

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

2)设置反向代理

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

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

#此时监听

以localhost为域名

以80为端口

以/apicontroller为地址开头

才会进行地址转发

结果:(访问成功)

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

总结

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