当前位置:首页 > 技术分析 > 正文内容

52、Vue 怎么实现跨域(必会)

ruisui885个月前 (01-15)技术分析53

1、什么是跨域

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

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.2)Access-Control-Allow-Origin 为发起请求的主机地址

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

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

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/313.html

分享给朋友:

“52、Vue 怎么实现跨域(必会)” 的相关文章

用IDEA开发如何用Git快速拉取指定分支代码?

1,准备空的文件夹,git init2,关联远程仓库,git remote add origin gitlab地址3,拉取远程分支代码,git pull origin 远程分支名再用IDEA打开项目即可...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

VUE-router

七.Vue-router1、什么是vue-routervue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统页面切换是用超链接a标签进行切换。但vue里是用路由,因为我们用Vue做的都是单页应用,就相当于只有一个主的i...

三勾点餐系统java+springboot+vue3,开源系统小程序点餐系统

项目简述前台实现:用户浏览菜单、菜品分类筛选、查看菜品详情、菜品多属性、菜品加料、添加购物车、购物车结算、个人订单查询、门店自提、外卖配送、菜品打包等。后台实现:菜品管理、订单管理、会员管理、系统管理、权限管理等。 项目介绍三勾点餐系统基于java+springboot+element-plus+u...

尤雨溪:Vue 2生命周期已正式结束,开发团队应迁移至最新版本

IT之家 1 月 2 日消息,Vue.js 作者尤雨溪发文声称,Vue 2 已于 2023 年 12 月 31 日结束生命周期(EOL),目前 Vue 2 已经无法接收到新功能及修复补丁,还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。据悉,Vue 2.0 最初发布于 2016 年...

vue 异步更新那点事儿 #web前端

异步更新那点事儿。wue & vueuse官方团队成员。看一下群友投稿的问题。什么问题?就是它这边有一个组件,这个组件里面有个userID,然后这个userID通过props传给了子组件,子组件是userinfo,它里面是用来渲染用户信息的。渲染用户信息的同时,userinfo这个组件又暴露...