脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → Nginx解决前端访问资源跨域

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报错"Too many open files"问题的深度解析与解决方案

    Nginx报错"Too many open files"问题的深度解析

    在高并发场景下,Nginx作为Web服务器或反向代理时,常常会遇到“Too many open files”错误,本文将从问题原理,解决方案,配置优化及验证方法等方面,详细解析如何解决这一问题,希望对大家有所帮助
    2025-06-06
  • Nginx更改conf配置文件的代码详解

    Nginx更改conf配置文件的代码详解

    本文主要介绍了Nginx如何更改conf配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作有一定的参考学习价值,需要的朋友们下面跟着小编来一起来学习吧
    2024-02-02
  • Nginx $remote_addr和$proxy_add_x_forwarded_for变量的实现

    Nginx $remote_addr和$proxy_add_x_forwarded_for变量的实现

    本文主要介绍了Nginx $remote_addr和$proxy_add_x_forwarded_for变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • 在nginx中实现单位时间内限制访问频率的教程

    在nginx中实现单位时间内限制访问频率的教程

    这篇文章主要介绍了在nginx中实现单位时间内限制访问频率的教程,并非针对IP而是全局的访问量限制,需要的朋友可以参考下
    2015-04-04
  • Nginx配置中使用Lua脚本的实现步骤

    Nginx配置中使用Lua脚本的实现步骤

    在阿里云API网关和字节跳动边缘计算平台中,Nginx+Lua的组合已成为处理复杂业务逻辑的标准解决方案,下面我们就来介绍一下Nginx配置中使用Lua脚本的实现步骤,感兴趣都可以了解一下
    2025-09-09
  • Nginx禁止指定UA访问的方法

    Nginx禁止指定UA访问的方法

    这篇文章主要介绍了Nginx禁止指定UA访问的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 配置Nginx实现简单防御cc攻击

    配置Nginx实现简单防御cc攻击

    本文主要介绍lua+Nginx下如何快速有效得防御CC攻击。至于如何安装Nginx就不详细介绍了，闲话少说，大家请看示例
    2018-02-02
  • Nginx重定向后请求参数丢失的原因分析及解决方案

    Nginx重定向后请求参数丢失的原因分析及解决方案

    在日常开发和运维中,我们经常会遇到需要使用 Nginx 进行反向代理的场景,但在配置 proxy_pass 时,有时候可能会遇到请求参数丢失的问题,在这篇文章中,我们将会详细探讨这个问题并给出几种解决方案,需要的朋友可以参考下
    2023-11-11
  • nginx 限速之limit_conn的使用

    nginx 限速之limit_conn的使用

    通过nginx我们有三种限速方式分别是: 限制请求数(request),限制连接数(connection),限制响应速度(rate),本文就来介绍一下nginx 限速之limit_conn的使用,ngx_http_limit_conn_module 模块主要是用于根据特定的key来限制连接的数量,感兴趣的可以了解一下
    2023-10-10
  • windows系统安装配置nginx环境

    windows系统安装配置nginx环境

    这篇文章介绍了windows系统安装配置nginx环境的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06

最新评论