記一次Api請求,沒法寫入cookie（vue-cli3坑位）

說說前端小夥伴遇到的問題

後臺小夥伴指定了POST請求，請求頭'Content-Type': 'application/json'

經過Allow-Control-Allow-Origin拓展解決跨域（這裏的跨域方式會致使瀏覽器沒法攜帶cookie），經過jquery設置'Content-Type': 'application/json'，

相應面板顯示200，成功，可是返回數據爲 application/json no support 等。

在swagger上模擬請求，數據是正確的

後面發現是後臺返回的格式爲字符串致使。

在沒找出問題以前，擔憂是跨域問題，就借用了另外一個cli3搭建的項目，經過axios去請求，經過proxy解決跨域

發現axios（{method: 'post'}）或axios.post都會被轉爲GET請求（代理又不是jsonp），並返回一個請求連接的字符串。

查看chrome網絡請求爲GET而且request headers裏沒有發現'Content-Type，

因而從新設置headers: {'Content-Type': 'application/json' }，請求變爲POST，請求成功。

登陸接口成功，可是請求別的接口的時候被重定向到登陸超時接口

發現登陸請求的接口，顯示200，可是沒有cookie寫入，因此會重定向到別的接口

查看響應頭是有cookie寫入的

Set-Cookie:

rememberMe=deleteMe; Path=/tb-customer-web_war; Max-Age=0; Expires=Thu, 21-Mar-2019 10:06:39 GMT

後查資料發現是path路徑匹配出錯，致使cookie找不到路徑，沒法寫入,因此須要重寫cookie路徑

配置vue.config.js proxy

'/': {
                target: 'http://x.x.x.x:10021/tb-customer-web_war/',//真實請求地址
                ws: true,
                changOrigin: true,
                pathRewrite: function(path, req) { //重寫路徑，
                    return path.replace('/', '');/
                },
                cookiePathRewrite: {//重寫cookie路徑
                    '/tb-customer-web_war': '/'
                }
            },

完美解決

set-cookie:

JSESSIONID=ffdd8535-043a-4afd-916a-50d6ad88a935; Path=/; HttpOnly

參考連接 https://fullsmilespace.com/?p=296