被前端跨域问题折磨快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/

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

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

访问地址:'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为地址开头

才会进行地址转发

1 uni.request({
2 url:'http://localhost:80/ApiController/test',
3 success:(res)=>{
4 console.log(res.data)
5 },
6 })

结果:(访问成功)

Nginx解决前端访问资源跨域问题的更多相关文章

  1. 不用调整Nginx,SpringBoot也能解决前端访问的跨域问题

    1.什么情况下会出现跨域问题 通常,在前端工程师的开发过程中,往往在本地机器启动前端服务, 而调用的后端接口服务是在另外一台机器运行,这时就会出现跨域问题,让接口无法调通. 而到了测试环境和生产环境, ...

  2. nginx配置反向代理,解决前端开发的跨域问题

    适用:开发和生产环境 配置如下 server { listen 10901; server_name res.pre.ices.red; #charset koi8-r; #access_log lo ...

  3. Nginx. 用http访问https跨域

    用http 访问 https域名, 报跨越问题 解决方法: 在nginx相应服务的转发配置下添加: add_header 'Access-Control-Allow-Origin' 'http://i ...

  4. nginx/apache静态资源跨域访问问题详解

    1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so把#注释符 ...

  5. 如何用Nginx解决前端跨域问题?

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  6. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  7. respond.js第六行 SCRIPT5: 拒绝访问。跨域问题

    问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...

  8. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  9. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

随机推荐

  1. python+request+unittest+HTMLTestRunner

    https://www.imooc.com/article/details/id/20813 https://www.cnblogs.com/fennudexiaoniao/p/7771931.htm ...

  2. OI知识点/得分技巧的归纳总结

    网络流 拆点/拆边技巧 题目来源 bzoj1070 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 的车进行维修所用的时间 ...

  3. 题解-Magic Ship

    Magic Ship 你在 \((x_1,y_1)\),要到点 \((x_2,y_2)\).风向周期为 \(n\),一个字符串 \(s\{n\}\) 表示风向(每轮上下左右),每轮你都会被风向吹走一格 ...

  4. redis学习之——五大基本数据类型

    redis 键 (key) 基本数据类型:string 字符串 list (列表)  set(集合)  hash(类似java 中的Map)   zset(有序集合) 官方命令doc redis 键 ...

  5. Python编码相关

    1.#coding=utf-8的作用 作用是这个文件代码的编码格式,如果没有声明代码中不能出现中文字符,包括注释中也不能出现.否则会报错SyntaxError: Non-ASCII character ...

  6. js实现弹幕

    弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <h ...

  7. dbeaver 驱动安装

    一.背景: 在Windows 10 安装dbeaver数据库连接工具,点"测试连接"的时候出现报错如下: Error resolving dependencies   Maven ...

  8. SpringBoot异步调用--@Async详解

    1. 概述   在日常开发中,为了提高主线程的效率,往往需要采用异步调用处理,例如系统日志等.在实际业务场景中,可以使用消息中间件如RabbitMQ.RocketMQ.Kafka等来解决.假如对高可用 ...

  9. Docker(三):Docker安装MySQL

    查找MySQL镜像 镜像仓库 https://hub.docker.com/ 下拉镜像 docker pull mysql:5.7 查看镜像 docker images 创建MySQL容器 命令式启动 ...

  10. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...