记一次Api请求,无法写入cookie，vue-cli3坑位

2023-11-09 00:18•JavaScript•阅读 2570

说说前端小伙伴遇到的问题

后台小伙伴指定了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