vue怎么让接口带上cookie_【VUE + SPA】接口跨域, 携带cookie 的解决方案

本文介绍了在Vue单页面应用中,如何处理接口跨域并携带cookie的问题。通过代理转发、设置pathRewrite以及利用nginx和whistle工具进行配置,解决了开发环境下的跨域和cookie携带问题。
摘要由CSDN通过智能技术生成

背景

由于历史原因,一个站点需要做成完全的SPA应用是非常困难的, 但我们可以在一些比较独立的业务中使用SPA, 每个SPA应用相互独立. 这样在用webpack打包的时候其实是会加快效率,同时不同的业务的依赖也可以不一样, 方便以后维护.

思考

当我在使用 vue + webpack 开发单页面的时候,主机host是 localhost, 端口是 8080(可自行更改). 但我的本地开发站点 在其它的linux 主机上, 而且使用 nginx 进行了代理.

站点里面已经存在了其它业务, 如果我在自己机器上开发,那么如何去调用访问这个站点的接口呢?

代理转发

如果你使用的是 vue-cli 进行初始化项目, 比如:

vue init webpack new-project

那么在config/index.js 下可以修改 dev.proxyTable

proxyTable: {

'/api': {

target: 'http://api.example.com',

changeOrigin: true,

onProxyReq (proxyReq, req, res) {

}

}

}

源地址

转发地址

localhost:8080/api

api.example.com/api

localhost:8080/api/notifications

api.example.com/api/notifications

如果我路能需还定有开都视这讲房哦搞有名需移洁页们要去掉 api.example.com的api路径朋支

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值