利用Nginx怎么解决前端访问资源跨域问题 - 行业资讯 - 肥雀云

　　介绍

本篇文章为大家展示了利用Nginx怎么解决前端访问资源跨域问题,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> 1,首先介绍Windows环境下Nignx的相关命令操作

Nginx常用命令:

<李>

验证配置是否正确:Nginx - t

<李>

查看Nginx的版本号:Nginx - v

<李>

启动Nginx:开始Nginx

<李>

快速停止或关闭Nginx: Nginx - s停止

<李>

正常停止或关闭Nginx: Nginx - s退出

<李>

配置文件修改重装载命令:Nginx - s重载

在停止ngix后,会自动删除/logs目录下的Nginx。pid

<李>

可以使用命令nginx - c conf/nginx。参看重新创建或者再次启动nginx

查看nignx监听端口是否启动成功

<李>

netstat另|中端口号

解决关闭nignx后端口仍在监听中

1, netstat另|中端口号#获取到PID

2, tasklist |中“PID"#命令找到nginx进程信息

3, taskkill/f/t/im nginx。exe #结束nginx进程

<强> 2,介绍如何配置Nignx解决跨域问题

前端ip端口号:http://localhost: 8080/

后端ip端口号:http://localhost: 8082/

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

uni.request ({ 　　url:才能& # 39;http://localhost: 8082/ApiController/测试# 39; 　　成功:才能(res)=祝辞{ 　　console.log才能(res.data) 　　,,}, 　　})

访问地址:& # 39;http://localhost: 8082/ApiController/测试# 39;就会出现

利用Nginx怎么解决前端访问资源跨域问题

那么我们进行Nignx配置

编辑/config/nginx.conf此文件

1)添加头信息,在Nginx。参看配置文件http块中添加跨域访问配置

add_header Access-Control-Allow-Origin *,,//允许所有域名跨域访问代理地址　　add_header Access-Control-Allow-Headers X-Requested-With; 　　add_header Access-Control-Allow-Methods 得到,,//跨域请求访问请求方式,

2)设置反向代理

server { 　　listen 才能,,,# 80;配置nignx的监听端口　　server_name 才能;localhost, #配置nignx的监听地址　　位置/ApiController{才能,#监听地址,以/ApiController开头的地址　　,,proxy_pass http://localhost: 8082;, #转发地址　　,,} 　　}

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

http://localhost: 8082/ApiController/测试应修改为http://localhost: 80/ApiController/测试

#此时监听

以主机为域名

以80为端口

以/ApiController为地址开头

才会进行地址转发

uni.request ({ 　　,,url: & # 39; http://localhost: 80/ApiController/测试# 39; 　　,才能成功:(res)=祝辞{ 　　,,console.log (res.data) 　　,,}, 　　})

结果:(访问成功)

利用Nginx怎么解决前端访问资源跨域问题