nginx解决跨域问题
在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题.
跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题
首先,在我们开始之前,首先要知道跨域是如何产生的:
协议
ip
端口号
这三者有任何一个不同,就会产生跨域问题
了解了跨域的产生,接着我们就来看看,如何解决它
一.下载nginx
下载地址: http://nginx.org/en/download.html
如图所示, 选择相应的版本,进行下载
下载完成后,选择任意位置进行解压,不需要安装
解压完成后,进入nginx的目录,输入命令 nginx -v 如果能够出现版本,则说明成功,如图:
二. nginx反向代理解决跨域问题
在这里,我们使用ajax来做请求,然后node+express来写后台
前端代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body><button>点击</button><script>// 给button添加点击事件$('button').click(function(){$.ajax({url:'http://localhost:3000/user/find',success:function(r){console.log(r)},error:function(e){console.log(e)}})})</script>
</body>
</html>
后端代码,如下所示:
使用前,需要安装express npm install express
let express = require('express')
// 创建应用
let app = express()// get请求
app.get('/user/find',(req,res)=>{res.send('hello')
})// 启动服务,监听端口
app.listen(3000,()=>{console.log('启动成功...')
})
然后开启node服务
这个时候,如果打开页面访问接口,会出现跨域报错,如下图所示:
注意,打开文件的时候一定要在服务中打开,不要使用绝对路径打开
接着就是配置nginx文件,解决这个跨域问题
反向代理的意思就是把前端的地址和后端的地址 使用nginx转换到相同的地址下,如把上面的node服务3000端口 和 网页打开的服务5500端口都转换到 nginx的8000端口下
具体配置如下:
打开nignx底下conf文件夹,在conf文件夹中有一个nginx.conf 文件,更改配置如下
server {listen 8000;server_name localhost;# / 表示匹配路径为/的urllocation / {proxy_pass http://localhost:5500;}# /user 表示访问以/user 开头 的地址 如/username,/user/find等location /user {proxy_pass http://localhost:3000;}}
注意, listen那里不要使用node服务的3000,之前我是想着直接监听node的服务端口,应该是可以的,可是这样会占用3000接口,导致node服务启动不了
上面代码的意思是,把访问localhost:8000 转换成访问 localhost:5500,而访问localhost:8000/user... 则转换成localhost:3000/user
配置完成之后需要在终端中,使用 nginx -s reload 更新我们的配置
启动nginx的命令是 start nginx
然后,把前端代码的请求地址修改一下,此时前端访问的就不再是node的服务了,而是要访问nginx, 然后通过nginx做响应的转发
// 给button添加点击事件$('button').click(function(){$.ajax({url:'http://localhost:8000/user/find',success:function(r){console.log(r)},error:function(e){console.log(e)}})})
在浏览器中访问的也不再是localhost:5500了,而是localhost:8000,原因,已经在上方解释过了
这样就不会出现跨域问题了,这就是反向代理
希望本篇文章,能够对您有所帮助,欢迎批评指正!
nginx解决跨域问题相关推荐
- 前端如何使用proxyTable和nginx解决跨域问题
前端如何使用proxyTable和nginx解决跨域问题 参考文章: (1)前端如何使用proxyTable和nginx解决跨域问题 (2)https://www.cnblogs.com/webhmy ...
- 使用nginx解决跨域问题
1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的.前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- Nginx 解决跨域问题
什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 nginx解决跨域请求 nginx.config配置 server {listen 80;server_na ...
- 如何用nginx解决跨域问题
先来说一下什么是同源策略 同源(域名.协议.端口相同)策略是一种约定,是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,浏览器的正常功能将受到影响. 什么是跨域? 跨域就是跨域名,跨端口,跨协议 ...
- VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题 Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图. VUE配置的代理 Vue的代理跨域问题,需要确定的是在开发 ...
- Nginx 解决跨域
项目准备 前端网站地址:http://localhost:8080 服务端网址:http://localhost:8081 确认服务端是没有处理跨域的,先用postman测试服务端接口是正常的 当前端 ...
- Nginx解决跨域问题的具体实现
解决方案 使用add_header指令,该指令可以用来添加一些头信息 语法 add_header name value... 默认值 - 位置 http.server.location 此处用来解决跨 ...
- nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
最新文章
- java 日志输出 log4j 简介
- 任正非谈鸿蒙系统失误,谷歌也没想到会来的这么快,任正非谈鸿蒙:系统不难,生态快完善...
- Boost:不受约束的bimap双图的测试程序
- easyexcel和poi对比_POI 和 EasyExcel
- 如何清除BIOS密码
- java输入语句怎么写_java中输入语句是怎么写的
- 北理c语言乐学作业分数运算,北理乐学C语言答案-最新(12页)-原创力文档
- 华为路由器配置备忘录
- laravel seeder 数据填充
- AD(九)原理图Value值核对、网路编号核对、元件名称核对
- 清除缓存-Ctrl+Shift+Delete
- 快手小筷子机器人_快手小快机器人设置 苹果手机小快机器人怎么弄
- 【Oracle SQL数据库-教学2】--- Oracle数据库基础
- 【报错】win键被锁怎么解锁
- 武汉公办专科学校以计算机为特长,专业计算机技术公办学校
- BLF格式的CAN数据
- 用p5.js实现动态形状笔刷
- 【轻微课学画笔记】关于绘画中的一点透视
- 【游戏开发日志】【Unity】day_one
- CMMI-技术解决方案(TS)
热门文章
- vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
- 反驳生命的起点是rna_向“RNA世界”假说发起挑战,地球首个生命由RNA-DNA混合产生|总编辑圈点...
- 2017:人工智能来喽
- 如何高效申请拿到美国访问学者邀请函?
- 四川一度智信:电商网店评分提升技巧
- ARM架构版本及处理器系列详细介绍
- 电脑操作基础小白入门
- HTML+CSS+JS入门
- Docker(三)之镜像与容器
- 阿里云语音服务-交互式语音应答(ivrCall)、语音回执消息的结合使用