vue項目部署後跨域請求後端失敗（已解決）

未解決前

驗證碼加載失敗

解決後

驗證碼加載成功

解決辦法

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

    server {
        listen       8080;           # 監聽的端口號

        server_name 47.115.5.93;  # 服務器的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://47.115.12.243;  #第一個跨域請求的地址
            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://47.107.158.11/PInn;  # 第二個跨域請求的地址
            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;
        }
 }

注意：以上提供了兩種解決方法，但是當兩個都使用第二中方法時會出現問題。

附：本地跨域問題的解決