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

 更新时间:2021年01月11日 11:01:17   作者:昆明--菜鸟入门  
这篇文章主要给大家介绍了关于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/

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

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

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

那么我们进行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配置Https安全认证的实现

    Nginx配置Https安全认证的实现

    为了保障应用的安全性,我们在架构网络层的时候需要采用HTTPS协议。本文介绍了Nginx配置Https安全认证的实现,分享给大家,感兴趣的可以了解一下
    2021-05-05
  • 详解linux中 Nginx 常见502错误问题解决办法

    详解linux中 Nginx 常见502错误问题解决办法

    这篇文章主要介绍了详解linux中 Nginx 常见502错误问题解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Linux下Nginx安全证书ssl配置方法

    Linux下Nginx安全证书ssl配置方法

    这篇文章主要介绍了linux下nginx服务器配置安全证书的方法,分享下证书的具体安装步骤,有需要的朋友参考下
    2014-01-01
  • 如何利用nginx通过正则拦截指定url请求详解

    如何利用nginx通过正则拦截指定url请求详解

    这篇文章主要介绍了如何利用nginx通过正则拦截指定url请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • Nginx日志统计分析的常用命令总结

    Nginx日志统计分析的常用命令总结

    这篇文章主要给大家总结了关于Nginx日志统计分析的一些常用命令,其中包括IP相关统计、页面访问统计、性能分析、蜘蛛抓取统计、TCP连接统计等相关命令的总结,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Nginx反向代理及负载均衡如何实现(基于linux)

    Nginx反向代理及负载均衡如何实现(基于linux)

    这篇文章主要介绍了Nginx反向代理及负载均衡如何实现(基于linux),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • Nginx中使用Lua脚本配置示例

    Nginx中使用Lua脚本配置示例

    这篇文章主要介绍了Nginx中使用Lua脚本配置示例,本文以一个Lua拦截器为例讲解如何配置使用Lua脚本,需要的朋友可以参考下
    2015-06-06
  • Nginx简要安装配置方法图文教程

    Nginx简要安装配置方法图文教程

    这篇文章主要以图文结合的方式为大家详细介绍了Nginx简要安装配置方法教程,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 为Nginx服务器配置黑名单或白名单功能的防火墙

    为Nginx服务器配置黑名单或白名单功能的防火墙

    这篇文章主要介绍了为Nginx服务器配置黑名单或白名单功能的防火墙的方法,文中还附带介绍了一个基于lua的第三方防火墙模块,需要的朋友可以参考下
    2016-01-01
  • nginx 关闭默认站点的方法

    nginx 关闭默认站点的方法

    国内机房一般都要求网站主关闭空主机头,防止未备案的域名指向过来造成麻烦
    2012-09-09

最新评论