vue怎么实现跨域呢?讲讲~

26 篇文章 0 订阅

写在前面

        晚上好呀朋友们,小王虽迟但到,永不缺席(吹牛皮)。

        讲讲vue里的跨域问题。这两天会写一些面试问题,可以花少量时间阅读一下下。

1、什么是跨域

        跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议端口域名。只要这三个中有一个不同就是跨域。

2、使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

        打开 config/index.js,在 proxyTable 中添写如下代码:

proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}

3、使用 CORS(跨域资源共享)

        3.1前端设置,vue 设置 axios 允许跨域携带 cookie(默认是不带 cookie) axios.defaults.withCredentials = true;

        3.2后端设置:

                3.2.1跨域请求后的响应头中需要设置

                3.2.2Access-Control-Allow-Origin 为发起请求的主机地址

                3.2.3Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域 带 cookie,但此时 Access-Control- Allow-Origin 不能为通配符*

                3.2.4Access-Control-Allow-Headers,设置跨域请求允许的请求头

                3.2.5Access-Control-Allow-Methods,设置跨域请求允许的请求方

写在最后

        今天被人鼓励讲,说我不是个废物,是一个独一无二的人,我相信我也是吧。虽然在这种技术帖子里没人会关心作者本身的情绪,但是可能读者朋友们也会愿意阅读有血有肉的人写出的文字吧。总是抱怨除了停滞不前外没有任何意义,啊今天是励志小王,不要总是情绪化,少说一些叽叽喳喳的废话,多多学习,多多上进,好好生活,与诸君共勉。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值