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

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;
        }
 }

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

附:本地跨域问题的解决

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章