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

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

ruisui883个月前 (01-15)技术分析43

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 怎么实现跨域(必会)” 的相关文章

细数5款国外热门Linux发行版

Linux系统已经与我们的生活息息相关,当你用Android手机浏览这篇文章时,你就已经在使用Linux系统。当然作为编程开发最热门的系统,他还有很多专注于开发使用的版本。Fedora热门入门推荐,一款优秀的程序猿专供Linux发行版,自带开发者门户,集成大量教程指南、开发集成环境、虚拟机等工具,简...

Beta版Linux Mint“Xia”发行版22.1发布

IT之家 12 月 13 日消息,Beta 版 Linux Mint“Xia” 22.1 昨日(12 月 12 日)发布,新版本基于 Ubuntu 24.04,内核版本为 Linux 6.8,长期支持将持续到 2029 年,为用户提供可靠稳定的使用体验。新版本在软件包管理方面,主要弃用了传统的 ap...

Gemini应用在Android上广泛推出2.0闪电模式切换器

#头条精品计划# 快速导读谷歌(搜索)应用的测试频道在安卓设备的双子应用中推出了2.0闪电实验功能,现已向稳定用户开放。双子应用通过谷歌应用运行,目前推出的15.50版本中,用户可通过模型选择器体验不同选项,包括1.5专业版、1.5闪电版和2.0闪电实验版。2.0闪电实验模型提供了更快的响应速度和优...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出 JavaScript 中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可以像这样得到数组的长度:const arr = [1, 2, 3]; console.log(a...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...