用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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容