Nginx反向代理部署Vue项目,解决跨域

电脑知识 投稿 121000 0 评论

Nginx反向代理部署Vue项目,解决跨域

vue项目部署的时候需要使用nginx做反向代理,因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。

使用nginx反向代理,解决Vue项目部署跨域问题

配置nginx

server {
        listen 80;
        #listen [::]:80;
        server_name www.sfjvipc.om ;
        index index.html index.htm index.php
        root  /home/wwwroot/sfjvip;
        
        location / {
          try_files $uri $uri/ @router;
          index index.html;
        }
        
        location @router {
          rewrite ^.*$ /index.html last;
        }
        
        location ^~ /api/ {
            proxy_set_header Host $host;
            # 存放用户的真实ip
            proxy_set_header X-Real-IP $remote_addr;
            # 每经过一个反向代理,就会把反向代理IP存放在X-Forwarded-For里
    	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	    #node api server 即需要代理的IP地址
            proxy_pass http://127.0.0.1:9188/;
        }
}

编程笔记 » Nginx反向代理部署Vue项目,解决跨域

赞同 (198) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽