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/
现在我们在不做跨域设置时,前端请求如下
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解决前端访问资源跨域问题的更多相关文章
- 不用调整Nginx,SpringBoot也能解决前端访问的跨域问题
1.什么情况下会出现跨域问题 通常,在前端工程师的开发过程中,往往在本地机器启动前端服务, 而调用的后端接口服务是在另外一台机器运行,这时就会出现跨域问题,让接口无法调通. 而到了测试环境和生产环境, ...
- nginx配置反向代理,解决前端开发的跨域问题
适用:开发和生产环境 配置如下 server { listen 10901; server_name res.pre.ices.red; #charset koi8-r; #access_log lo ...
- Nginx. 用http访问https跨域
用http 访问 https域名, 报跨越问题 解决方法: 在nginx相应服务的转发配置下添加: add_header 'Access-Control-Allow-Origin' 'http://i ...
- nginx/apache静态资源跨域访问问题详解
1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so把#注释符 ...
- 如何用Nginx解决前端跨域问题?
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...
- respond.js第六行 SCRIPT5: 拒绝访问。跨域问题
问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- 解决阿里云OSS跨域问题
解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...
随机推荐
- python+request+unittest+HTMLTestRunner
https://www.imooc.com/article/details/id/20813 https://www.cnblogs.com/fennudexiaoniao/p/7771931.htm ...
- OI知识点/得分技巧的归纳总结
网络流 拆点/拆边技巧 题目来源 bzoj1070 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 的车进行维修所用的时间 ...
- 题解-Magic Ship
Magic Ship 你在 \((x_1,y_1)\),要到点 \((x_2,y_2)\).风向周期为 \(n\),一个字符串 \(s\{n\}\) 表示风向(每轮上下左右),每轮你都会被风向吹走一格 ...
- redis学习之——五大基本数据类型
redis 键 (key) 基本数据类型:string 字符串 list (列表) set(集合) hash(类似java 中的Map) zset(有序集合) 官方命令doc redis 键 ...
- Python编码相关
1.#coding=utf-8的作用 作用是这个文件代码的编码格式,如果没有声明代码中不能出现中文字符,包括注释中也不能出现.否则会报错SyntaxError: Non-ASCII character ...
- js实现弹幕
弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <h ...
- dbeaver 驱动安装
一.背景: 在Windows 10 安装dbeaver数据库连接工具,点"测试连接"的时候出现报错如下: Error resolving dependencies Maven ...
- SpringBoot异步调用--@Async详解
1. 概述 在日常开发中,为了提高主线程的效率,往往需要采用异步调用处理,例如系统日志等.在实际业务场景中,可以使用消息中间件如RabbitMQ.RocketMQ.Kafka等来解决.假如对高可用 ...
- Docker(三):Docker安装MySQL
查找MySQL镜像 镜像仓库 https://hub.docker.com/ 下拉镜像 docker pull mysql:5.7 查看镜像 docker images 创建MySQL容器 命令式启动 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...