Nginx解决前端访问资源跨域问题的方法详解_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解决前端跨域问题利用Nginx代理如何解决前端跨域问题详析

  • 本文相关:
  • 详解使用nginx和uwsgi配置python的web项目的方法
  • 详解nginx如何配置web服务器的示例代码
  • nginx服务器配置404错误页面转向的方法
  • nginx+tomcat+https 服务器负载均衡配置实践方案详解
  • 使用nginx正向代理实现内网域名转发过程解析
  • 为nginx服务器配置黑名单或白名单功能的防火墙
  • 很详细的nginx配置说明
  • nginx 502 bad gateway和nginx 504 gateway time-out错误解决方法
  • nginx跨域设置access-control-allow-origin无效的解决办法
  • nginx实现集群的负载均衡配置过程解析
  • 如何搞定前端资源服务跨域问题之nginx篇
  • 如何搞定前端资源服务跨域问题之nginx篇
  • Nginx解决前端跨域问题 CORS跨域配置?
  • nginx怎么访问不了html文件
  • 怎么访问nginx服务器中的文件
  • nginx 是如何处理访问请求的
  • Nginx如何禁止跨域访问某个PHP文件
  • linux 上怎么配置nginx 解决跨域问题
  • 前端nginx作为缓冲,将所有的访问都传给后端,这样...
  • nginx指定代理页面之后,前端怎样获取代理的那个链接?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全星外虚拟主机华众虚拟主机linuxwin服务器ftp服务器dns服务器tomcat nginxzabbix云和虚拟化服务器其它首页服务器如何用nginx解决前端跨域问题利用nginx代理如何解决前端跨域问题详析详解使用nginx和uwsgi配置python的web项目的方法详解nginx如何配置web服务器的示例代码nginx服务器配置404错误页面转向的方法nginx+tomcat+https 服务器负载均衡配置实践方案详解使用nginx正向代理实现内网域名转发过程解析为nginx服务器配置黑名单或白名单功能的防火墙很详细的nginx配置说明nginx 502 bad gateway和nginx 504 gateway time-out错误解决方法nginx跨域设置access-control-allow-origin无效的解决办法nginx实现集群的负载均衡配置过程解析nginx提示:500 internal servernginx 多站点配置方法集合权限问题导致nginx 403 forbiddenginx fastcgi错误primary scripnginx服务器的反向代理proxy_pasnginx 403 forbidden的解决办法详解nginx服务器中配置超时时间的nginx伪静态配置和常用rewrite伪nginx下301重定向域名的方法小结windows下nginx+php5的安装与配置nginx服务器下配置使用索引目录的教程nginx-ingress-controller日志持久化方案nginx反向代理进行yum配置的步骤详解详解nginx rewrite和根据url参数locationnginx+keepalived实现双机主备的方法centos 6.5 64位中nginx详细安装部署教程iis+nginx实现负载均衡的详细步骤centos7系统下用yum安装nginx详解wordpress中开启多站点支持及nginx的重写nginx配置同一个域名同时支持http与https
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved