利用nginx反向代理跨域

最新推荐文章于 2024-11-03 18:00:08 发布

原创最新推荐文章于 2024-11-03 18:00:08 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #FE

nginx 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Node.js创建一个简单的后端接口，并通过Nginx进行反向代理，解决跨域访问问题。前端通过相对路径调用后端接口，Nginx配置代理转发请求。

了解正向代理和反向代理

写一个后端node的接口，返回一条msg

var express=require('express')
var app=express()

app.get('/getMsg',function(req,res){
  //  res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello world')
})

app.post('/')
var server=app.listen(8081,function(){
    var host=server.address().address
    var port=server.address().port
    console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

前端的是运行在80端口，跨域访问。
nginx配置在server里面添加一个代理,增加我们后端的getMsg端口,进行反向代理

 listen       80; #运行在80端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
       
       location / {
          root   html;#文件根目录
          index  index.html index.htm;#默认起始页
      }
        location /getMsg {          #匹配/getMsg这个接口
            proxy_pass  http://localhost:8081/getMsg; # 反向代理到真正的url，获取资源
        }

把写好的html放在nginx目录下的html文件下

  var xmlhttp=new XMLHttpRequest()
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
           
            var res=xmlhttp.responseText
            document.write(res)
        }
    }
    xmlhttp.open("GET","/getMsg")   //要走nginx,改成相对路径,nginx匹配到进行反向代理
    xmlhttp.send()