使用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开发时再来研究一下