記一個http-proxy-middleware 代理訪問nginx映射的接口不經過的問題(connection close)

  工做過程當中碰見一個問題,使用Vue-cli 搭建了一個工程,因爲跨域的問題 使用了自帶的dev-server Express Server(A後臺) http-proxy-middleware 去訪問後臺的接口nginx Server(B後臺),而這個接口爲niginx 代理的另外一個後臺(C後臺),理清一下關係:javascript

  開發頁面去請求A後臺(devServer)的接口, 而後這個請求會被轉發的B後臺(nginx), 而後再會被nginx映射到C後臺(咱們真實要訪問的後臺),你可能會問爲何不用A直接去代理訪問C, 非要在中間加了個nginx呢 ? 因爲C是個交換機設備上的server, 直接用個人A (devServer)去代理C很差使,因此纔有這樣的情景。java

  從B到C的過程一切都很正常,可是從A到B中間的每次的請求返回時connection 都是close , 而正常的是keep-alive的,這就致使我在頁面裏登陸成功後 繼續請求其餘接口仍是驗證不經過。網上找了好多資料都很差使。jquery

  最終解決方案是,(當一條路走不通的時候,換一條試試):nginx

  跨域問題解決的方法之一, CORS ajax

  經過修改ngnix配置文件,加入allow-origin頭跨域

        location ~ \.do$ {
	    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; //這個是個人A devServer,必須設置具體的值,不要使用* 不然訪問接口的時候瀏覽器會報錯
	    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	    add_header 'Access-Control-Allow-Credentials' true;
	    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            proxy_pass   http://172.16.15.65;
        }

  配置完這個重啓nginx而後你的頁面裏直接寫B的接口就不會存在跨域問題了,可是這個時候若是登陸的過程當中產生了一個cookie這個信息在你後面訪問藉口的時候不會自動添加上的,須要在你的ajax裏面加上withCredentials,例如jquery 的ajax瀏覽器

     $.ajax({
            url : "*****",
            type : post,
            dataType : params.dataType,
            data : cliPostData,
            cache : false,
            //注意這裏
            xhrFields: {
              withCredentials: true
            },
            success : function(data) {        
            }     
      })

  這樣就能夠攜帶cookie的認證信息了,而後再進行頁面的直接訪問接口就能夠正常使用了。cookie

相關文章
相關標籤/搜索