用nginx的反向代理机制解决前端跨域问题

用nginx的反向代理机制解决前端跨域问题

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