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;
# / 表示匹配路径为/的url
location / {
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,原因,已经在上方解释过了
这样就不会出现跨域问题了,这就是反向代理
希望本篇文章,能够对您有所帮助,欢迎批评指正!
本文地址：https://blog.csdn.net/rolinabc/article/details/111881458