通过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.rhkb.cn/news/172004.html

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

相关文章

漏洞复现--用友 畅捷通T+ .net反序列化RCE

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

关于 @Transactional 注解的类中使用 this 调用问题

在一个类中打断点的时候报了一个异常&#xff0c;这个异常&#xff0c;但是一直找不到&#xff0c;直到我在类中调用另外一个方法的时候&#xff0c;看到该方法里面用了 this 调用了 mybatis-plus 的 Api 去操作数据库&#xff0c;而最外层的方法却添加了 Transactional(rollba…

接口自动化测试要做什么?一文3个步骤带你成功学会!

先了解下接口测试流程&#xff1a; 1、需求分析 2、Api文档分析与评审 3、测试计划编写 4、用例设计与评审 5、环境搭建&#xff08;工具&#xff09; 6、执行用例 7、缺陷管理 8、测试报告 了解了接口测试的工作流程&#xff0c;那"接口自动化测试"怎么弄&#xff1…

人工智能基础_机器学习007_高斯分布_概率计算_最小二乘法推导_得出损失函数---人工智能工作笔记0047

这个不分也是挺难的,但是之前有详细的,解释了,之前的文章中有, 那么这里会简单提一下,然后,继续向下学习 首先我们要知道高斯分布,也就是,正太分布, 这个可以预测x在多少的时候,概率最大 要知道在概率分布这个,高斯分布公式中,u代表平均值,然后西格玛代表标准差,知道了 这两个…

【psychopy】【脑与认知科学】认知过程中的面孔识别加工

目录 实验描述 实验思路 python实现 实验描述 现有的文献认为&#xff0c;人们对倒置的面孔、模糊的面孔等可能会出现加工时长增加、准确率下降的问题&#xff0c;现请你设计一个相关实验&#xff0c;判断不同的面孔是否会出现上述现象。请按照认知科学要求&#xff0c;画…

【Docker】Docker Swarm介绍与环境搭建

为什么不建议在生产环境中使用Docker Compose 多机器如何管理&#xff1f;如何跨机器做scale横向扩展&#xff1f;容器失败退出时如何新建容器确保服务正常运行&#xff1f;如何确保零宕机时间&#xff1f;如何管理密码&#xff0c;Key等敏感数据&#xff1f; Docker Swarm介…

论文阅读——InstructGPT

论文&#xff1a;Training_language_models_to_follow_instructions_with_human_feedback.pdf (openai.com) github&#xff1a;GitHub - openai/following-instructions-human-feedback 将语言模型做得更大并不能从本质上使它们更好地遵循用户的意图。例如&#xff0c;大型语…

基于Pytest+Requests+Allure实现接口自动化测试!

一、整体结构 框架组成&#xff1a;pytestrequestsallure设计模式&#xff1a; 关键字驱动项目结构&#xff1a; 工具层&#xff1a;api_keyword/参数层&#xff1a;params/用例层&#xff1a;case/数据驱动&#xff1a;data_driver/数据层&#xff1a;data/逻辑层&#xff1a…

PLC 学习day03 PLC软件安装 PLC软件的介绍和对应的知识

1.资料来源 链接&#xff1a;7.PLC编程学习入门视频教程全集-三菱GX-Works2编程软件安装_哔哩哔哩_bilibili 链接&#xff1a;8.三菱plc视频教程全集之编程语言及软元件介绍_哔哩哔哩_bilibili 2. PLC软件的安装 三菱的PLC软件安装视屏的链接&#xff1a; 7.PLC编程学习入门视频…

当线性规划与算法相遇:揭秘单纯形法(Simplex)的独特魅力

传统的解决线性规划问题的方法是图形法、代数法求解&#xff0c;但是图形法解题有极大的局限性&#xff0c;因为一旦变量超过3个&#xff0c;基本上就无法通过图形解决&#xff0c;而代数法虽然可以解题&#xff0c;但对于复杂的问题可能效果较差甚至无法求解&#xff01; 相比…

python DevOps

在云原生中&#xff0c;python扮演的角色是什么&#xff1f; 在云原生环境中&#xff0c;Python 作为一种高级编程语言&#xff0c;在多个方面扮演着重要角色。云原生是指利用云计算的各种优势&#xff08;如弹性、可扩展性和自动化&#xff09;&#xff0c;构建和运行应用程序…

Transformer英语-法语机器翻译实例

依照Transformer结构来实例化编码器&#xff0d;解码器模型。在这里&#xff0c;指定Transformer编码器和解码器都是2层&#xff0c;都使用4头注意力。为了进行序列到序列的学习&#xff0c;我们在英语-法语机器翻译数据集上训练Transformer模型&#xff0c;如图11.2所示。 da…

【Linux】部署单体项目以及前后端分离项目(项目部署)

一、简介 以下就是Linux部署单机项目和前后端分离项目的优缺点&#xff0c;希望对你有所帮助。 1、Linux部署单机项目&#xff1a; 优点&#xff1a; 简化了系统管理&#xff1a;由于所有服务都在同一台机器上运行&#xff0c;因此可以简化系统管理和维护。提高了性能&#x…

Spring Boot集成RESTful API

在Spring Boot中集成一个RESTful API是我们在实际开发中较为常见的一种开发任务&#xff0c;以下通过一个小的案例来展示在Spring Boot中创建RESTful API来编写一个单元测试。 本节使用到的注解&#xff1a; Controller&#xff1a;修饰class&#xff0c;用来创建处理http请求的…

(免费领源码) Asp.Net#SQL Server校园在线投票系统10557-计算机毕业设计项目选题推荐

摘 要 随着互联网大趋势的到来&#xff0c;社会的方方面面&#xff0c;各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去&#xff0c;而其中最好的方式就是建立网络管理系统&#xff0c;并对其进行信息管理。由于现在网络的发达&#xff0c;校园投票通过网…

吃瓜教程3|决策树

ID3算法 假定当前样本集合D中第k类样本所占比例为pk&#xff0c;则样本集合D的信息熵定义为 信息增益 C4.5算法 ID3算法存在一个问题&#xff0c;就是偏向于取值数目较多的属性&#xff0c;因此C4.5算法使用了“增益率”&#xff08;gain ratio&#xff09;来选择划分属性 CA…

财务数字化转型是什么?_光点科技

财务数字化转型是当今企业发展中的一项关键策略&#xff0c;旨在借助先进的数字技术&#xff0c;重新塑造和优化财务管理体系&#xff0c;以适应迅速变化的商业环境。这一转型不仅仅是技术的升级&#xff0c;更是对企业财务理念和流程的全面升级和改革。 财务数字化转型的核心在…

2.23每日一题(反常积分收敛性的判断)

解法一&#xff1a;用定义&#xff08;当被积函数的原函数比较好找时&#xff09;&#xff1a; 积分结果为存在则收敛&#xff0c;不存在则发散。 解法二&#xff1a;通过p积分的比较法判断敛散性&#xff1a; 即被积函数与p积分相比较&#xff0c;使得两者同敛散&#xff1b;再…

Centos安装RabbitMQ,JavaSpring发送RabbitMQ延迟延时消息,JavaSpring消费RabbitMQ消息

1&#xff0c;版本说明 erlang 和 rabbitmq 版本说明 https://www.rabbitmq.com/which-erlang.html 确认需要安装的mq版本以及对应的erlang版本。 2&#xff0c;下载安装文件 RabbitMQ下载地址&#xff1a; https://packagecloud.io/rabbitmq/rabbitmq-server Erlang下载地…

如何公网远程访问OpenWRT软路由web界面

文章目录 1.openWRT安装cpolar2.配置远程访问地址3.固定公网地址 简单几步实现在公网环境下远程访问openWRT web 管理界面&#xff0c;使用cpolar内网穿透创建安全隧道映射openWRT web 界面面板443端口&#xff0c;无需公网IP&#xff0c;无需设置路由器。 1.openWRT安装cpola…