通过Vue自带服务器实现Ajax请求跨域(vue-cli)

通过Vue自带服务器实现Ajax请求跨域(vue-cli)

跨域

  • 原理:从A页面访问到B页面,并且要获取到B页面上的数据,而两个页面所在的端口、协议和域名中哪怕有一个不对等,那么这种行为就叫跨域。
  • 注意:类似通过请求进行跨域的,大部分情况下并不是发不出去,也有可能是被浏览器拦截了。

为什么端口、协议和域名有一个不同就不能跨域?

  • 同源策略:同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受 到 XSS、CSRF 等攻击。同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址, 也是非同源的。

实现方案(需要安装axios)

在这里插入图片描述

  • 原理:浏览器和浏览器之间避免不了同源策略,但是通过服务器和服务器之间的传递是不需要同源策略的。
    • 当在【页面】中点击【发送请求】,则请求会去连接同在【8080服务器】
    • 再通过【8080服务器】的请求,连接到【8081服务器】的程序
    • 【8081服务器】响应,将数据传回【8080服务器】
    • 【8080服务器】响应,将数据传到【页面】上

安装axios

  • 原理:是一种基于promise实现对ajax技术的一种封装,可以满足于各种前端框架,用于负责与后端交互,get、post后端接口信息,相当前后端的窗口。
  • 安装方法:
    • 打开CMD窗口,通过命令跳转到当时安装Vue的文件路径中
    • 在窗口中输入npm i axios,当出现added 6 packages in 2m,就安装成功了
  • 使用方法:XXX.vue文件中,在<script></script>的第一行输入import axios from 'axios'即可(如果你的axios安装时弄了一个文件夹存放的话,那么将'axios'=>'./文件名/axios')

启动Vue内置服务器8080的代理功能,在vue.config.js中进行配置

第一种:简单开启

  • 原理:优先从proxy的路径上去访问get('请求路径')的资源,也就是(拼接)http://localhost:8000/请求路径,如果没有找到资源,则再从代理服务器上访问资源。
  • 缺点:这种配置方法不适合支持配置多个代理。
    • 这种单一的从8080端口=>8081端口当然可行,但是还有8082、8083、8084…(这么多端口每个配一遍就完了!!!)
// vue.config.js文件
devServer : {// Vue内置服务器8080端口proxy : 'http://localhost:8000'
}
// XXX.vue文件
axios.get('/请求路径').then(response => {// response.data:响应数据信息console.log('响应数据', response.data);},error => {// error.message:出现错误时,显示错误信息console.log('错误信息', error.message);}
)

第二种:高级开启(常用)

devServer : {proxy : {// 凡事请求路径以/api开始的,都走这个代理'/api' : {// 端口路径target : 'http://localhost:8000',// 重写'/api'路径pathRewrite : {'^/api':''},// 默认值true:表示支持 websocketws : true,// 默认值true:表示改变起源(让目标服务器不知道真正的起源)changeOrigin : true},'/foo' : {target : '<other_url>'}}}
  • 注意:pathRewrite : {'^/api':''}原本是没有的,可以自己添加,用来重写’/api’路径,
    • 以上的意思是将’/api’路径改为空,也就是请求路径前不用写’/api’
// XXX.vue文件
axios.get('(如果没设置pathRewrite的话,这里是要加上/api的)/请求路径').then(response => {// response.data:响应数据信息console.log('响应数据', response.data);},error => {// error.message:出现错误时,显示错误信息console.log('错误信息', error.message);}
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/121817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

23种设计模式(10)——门面模式

门面模式(Facade Pattern)又叫作外观模式&#xff0c;提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。其主要特征是定义了一个高层接口&#xff0c;让子系统更容易使用&#xff0c;属于结构型设计模式。 其实&#xff0c;在日常编码工作中&#xff0c;我们都在有…

[LaTeX] [数学符号] \mathbb{1}的各种替代方案:解决在 LaTeX 中输入黑板粗体的数字

[LaTeX] [数学符号] \mathbb{1}的各种替代方案&#xff1a;解决在 LaTeX 中输入黑板粗体的数字_latex mathbb-CSDN博客文章浏览阅读5w次&#xff0c;点赞36次&#xff0c;收藏80次。本文介绍如何在 LaTeX 中输入黑板粗体的数字。_latex mathbbhttps://blog.csdn.net/xovee/arti…

Python爬虫-经典案例详解

爬虫一般指从网络资源的抓取&#xff0c;通过Python语言的脚本特性&#xff0c;配置字符的处理非常灵活&#xff0c;Python有丰富的网络抓取模块&#xff0c;因而两者经常联系在一起Python就被叫作爬虫。爬虫可以抓取某个网站或者某个应用的内容提取有用的价值信息。有时还可以…

Android Studio 查看Framework源码

1、背景 安卓系统源码量很庞大&#xff0c;选择好的开发工具和方式去开发可以提升开发效率&#xff0c;常用的开发工具有Source Insight 、Visual Studio Code、Android Studio&#xff0c;vscode适合C和C代码开发&#xff0c;java层代码无法跳转和提示&#xff0c;因此&#…

2023 年江西省职业院校技能大赛软件测试(高职组)赛项样题

2023 年江西省职业院校技能大赛软件测试&#xff08;高职组&#xff09;赛项样题 任务一&#xff1a;功能测试&#xff08;45 分&#xff09; 1、测试计划&#xff08;5 分&#xff09; 任务描述 针对功能测试任务&#xff0c;划分和界定测试范围&#xff0c;分解测试任务&…

vue3基础流程

目录 1. 安装和创建项目 2. 项目结构 3. 主要文件解析 3.1 main.js 3.2 App.vue 4. 组件和Props 5. 事件处理 6. 生命周期钩子 7. Vue 3的Composition API 8. 总结和结论 响应式系统&#xff1a; 组件化&#xff1a; 易于学习&#xff1a; 灵活性&#xff1a; 社…

Java中级面试题记录(四)

一面面试题 1.Innodb的行数据存储模式 https://baijiahao.baidu.com/s?id1775090633458928876&wfrspider&forpc 2.行数据包含哪些信息&#xff1f; https://baijiahao.baidu.com/s?id1775090633458928876&wfrspider&forpc 3.MySQL在进行存储VARCHAR的时…

Python对于时间相关模块的学习记录(time,datetime等模块)

1&#xff0c;time.time&#xff08;&#xff09; 获得从计算机开始出生到现在的秒数(也成时间戳)&#xff0c;可以时间相减计算流逝时间 说明 &#xff1a;擅长时间相减计算流逝时间 导入方法 import time import time# 1&#xff0c;time.time 获得从计算机开始出生到…

matlab将十六进制转换为十进制(hex2dec函数)

hex2dec函数 将由 hexStr 表示的十六进制整数转换为等效的十进制数&#xff0c;并将其以双精度浮点值形式返回。 如果 hexStr 表示大于或等于 flintmax 的整数&#xff0c;则 hex2dec 可能不会将其精确表示为浮点值。 1.示例&#xff1a;将表示十六进制值的字符向量转换为十…

ChatGPT如何应对用户提出的道德伦理困境?

ChatGPT在应对用户提出的道德伦理困境时&#xff0c;需要考虑众多复杂的因素。道德伦理问题涉及到价值观、原则、社会和文化背景&#xff0c;以及众多伦理理论。ChatGPT的设计和应用需要权衡各种考虑因素&#xff0c;以确保它不仅提供有用的信息&#xff0c;而且遵循伦理标准。…

DDOS版-超功能记事本 Ⅲ 8.8源码

DDOS版-超功能记事本 Ⅲ 8.8源码 下载地址&#xff1a;https://user.qzone.qq.com/512526231/main

goland无法调试问题解决

goland 无法调试问题解决 golang 版本升级后&#xff0c;goland 无法进行调试了 首先请看自己下载的版本是否有误 1.apple系 M系列芯片的 arm64版本 2.apple系 intel系列芯片的x86_64 3.windows系 intel解决如下&#xff1a; 查看gopath ericsanchezErics-Mac-mini gww-api…

js控制checkbox单选,获取checkbox的值,选中checkbox

声明&#xff1a;网上的资料杂七杂八的搞得我一个不熟悉前端的后端开发者弄起来贼难受&#xff0c;现在将实现了的做一个整合&#xff0c;希望能给你们带来点帮助&#xff08;主要还是帮助我自己(●ˇ∀ˇ●)&#xff0c;防止丢失&#xff09; html代码组件示例 <div styl…

C/C++数据结构之深入了解线性表:顺序表、单链表、循环链表和双向链表

线性表是一种基本的数据结构&#xff0c;它在计算机科学中起着至关重要的作用。线性表用于存储一系列具有相同数据类型的元素&#xff0c;这些元素之间存在顺序关系。在C/C中&#xff0c;我们可以使用各种方式来实现线性表&#xff0c;其中包括顺序表、单链表、循环链表和双向链…

Linux防火墙:Firewalld 常用命令

Linux防火墙&#xff1a;Firewalld 常用命令 CentOS 和 Fedora 中默认的防火墙是 Firewalld 查看防火墙状态 firewall-cmd --state 启动防火墙 systemctl start firewalld 重启防火墙 systemctl restart firewalld 暂时关闭防火墙 systemctl stop firewalld 永久关闭防火墙…

【golang】Windows环境下Gin框架安装和配置

Windows环境下Gin框架安装和配置 我终于搞定了Gin框架的安装&#xff0c;花了两三个小时&#xff0c;只能说道阻且长&#xff0c;所以写下这篇记录文章 先需要修改一些变量&#xff0c;这就需要打开终端&#xff0c;为了一次奏效&#xff0c;我们直接设置全局的&#xff1a; …

大厂面试题-JVM中的三色标记法是什么?

目录 问题分析 问题答案 问题分析 三色标记法是Java虚拟机(JVM)中垃圾回收算法的一种&#xff0c;主要用来标记内存中存活和需要回收的对象。 它的好处是&#xff0c;可以让JVM不发生或仅短时间发生STW(Stop The World)&#xff0c;从而达到清除JVM内存垃圾的目的&#xff…

代码随想录Day31 贪心06 T738 单调递增的数字 T968监控二叉树

LeetCode T738 单调递增的数字 题目链接:738. 单调递增的数字 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 我们以332举例,题目要我们获得的是小于等于332的最大递增数字,我们知道这个数字要递增只能取299了,332 -- 329 --299 我们从后向前遍历,只要前一位大于后一位,我…

系统架构设计师之使用McCabe方法可以计算程序流程图的环形复杂度

系统架构设计师之使用McCabe方法可以计算程序流程图的环形复杂度

conda虚拟环境配置

命令行输入&#xff0c;conda -V 确定conda版本 创建自己的conda虚拟环境 activate 回车 conda create -n 名字 python版本号 执行命令 确认执行命令 输入y 创建完成 激活环境 conda activate 名字 进入python环境 python 退出 exit() conda deactive