使用nginx反向代理解决前端跨域问题

项目前后端分离后,前后端项目分开开发,尤其是单页面应用,前端代码会开启单独的服务器,若直接在前端项目中访问后端API,肯定会遇到因跨域不能访问的问题.于是我们用到了nginx俩解决这个问题。

nginx配置:

server {
        listen       80;                            # nginx访问端口
        server_name  localhost;                        # nginx访问域名
 
        location / {
            proxy_pass   http://127.0.0.1:5000;        # 前端静态页面地址
            proxy_redirect default;
            #设置主机头和客户端真实地址,以便服务器获取客户端真实IP
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                
        }
        location /apis/ {
            rewrite ^/apis/(.*)$ /$1 break;   #所有对后端的请求加一个api前缀方便区分,真正访问的时候移除这个前缀
            # API Server
            proxy_pass http://c23218c6.ngrok.io;  #服务器地址
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

ajax:

$.ajax({  
	  			      url : '/apis/api/member/login',
	  			      type:'post',
	  			      data:{username:uemail,password:pwd},
	  			      success:function(resdata) {
	  			      	console.log(resdata)
	  			      	var res=eval(resdata)
	  			        if (res.code==403) {
	  			          $('.alert-danger').show().text(res.message);
	  			        }else{
	  						
	  			        }
	  			       
	  			      }  
});

访问地址:localhost:80

貌似还有一种是用nodeJs去反向代理来实现跨域,此方法在vue开发时再来研究一下!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

赞助商

微信扫一扫,分享到朋友圈

使用nginx反向代理解决前端跨域问题
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close