vue项目部署后跨域请求后端失败（已解决）

系统管理员 2023-02-21 11:41 19阅读 0赞

### vue项目部署后跨域请求后端失败（已解决） ###

*  未解决前
 *  解决后
 *  解决办法

# 未解决前 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]  
验证码加载失败

# 解决后 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]  
验证码加载成功

# 解决办法 #

在 nginx/conf/nginx.conf 下做如下配置

server { 
            listen       8080;           # 监听的端口号
    
            server_name 127.0.0.1;  # 服务器的ip地址
    
            root /usr/local/nginx/html;   # 服务器中项目所在文件夹
    
            #charset koi8-r;
    
            #access_log logs/host.access.log main;
    
    
    
            location / { 
               # root /usr/local/nginx/html/;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
    
            # 解决跨域请求
            location /req { 
                rewrite ^.+req/?(.*)$ /$1 break;
                proxy_pass http://127.0.0.1;  #第一个跨域请求的地址
                proxy_redirect off;
                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 /api { 
                proxy_pass http://127.0.0.1:/login;  # 第二个跨域请求的地址
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection ‘upgrade’;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
            }
     }

注意：以上提供了两种解决方法，但是当两个都使用第二中方法时会出现问题。

**附：**[本地跨域问题的解决][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020063011092822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630111036528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/weixin_43520670/article/details/106759775