项目前后端分离后,前后端项目分开开发,尤其是单页面应用,前端代码会开启单独的服务器,若直接在前端项目中访问后端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开发时再来研究一下