記一次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