Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一个不错的解决方案。
前端地址www.baidu.com:80
后台接口地址www.baidu.com:4000
server {
listen 80;
server_name www.baidu.com baidu.com;
access_log logs/test.access.log;
#匹配以/api/开头的请求
location ^~ /api/ {
proxy_pass www.baidu.com:4000/; #注意域名后有一个/
}
location / {
root /usr/local/website/dist;
index index.html index.htm;
}
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
解释:
^~ /api/会匹配前台连接中是否带有这个关键词,如果有进行拦截。比如
链接请求是www.baidu.com/api/info,就会变成www.baidu.com:4000/info
记得proxy_pass后面的地址加一个/,否则接口地址会是 www.baidu.com:4000/api/info。
然后重启nginx命令是./nginx -s reload