vue中解决ajax跨域问题(no “access-control-allow-origin”)

文章目录

  • 跨域报错信息
  • 产生原因
  • 举例
  • 解决方法
    • 方式一
    • 优缺点
    • 方式二
    • 优缺点

跨域报错信息

在这里插入图片描述

产生原因

跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。

所谓同源指的是两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域。

举例

在这里插入图片描述

解决方法

常见的跨域解决方法有

  • cors 这个需要由后端在响应头上配置
  • jsonp 借助script中的标签src,在引入外部资源的时候不受同源限制,但是只能解决get请求跨域问题
  • 代理服务器
    本篇文章,主要讲解代理服务器在vue中的应用,解决跨域问题
    通过vue脚手架配置

方式一

找到vue官网
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
​ 在vue.config.js中添加如下配置:

devServer:{proxy:"http://localhost:5000"
}

本机服务器要把信息转发给谁,端口号就写谁
例如:本机是locahost:8080 要给locahost:5000发请求,那么配置的就是5000
在这里插入图片描述
把请求的改成8080

当请求的资源本机原本就存在时,就不会发送请求,如果解决这个问题,请看方式二

优缺点

优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

方式二

在这里插入图片描述
​ 编写vue.config.js配置具体代理规则:

module.exports = {devServer: {proxy: {'/api1': {// 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': {// 匹配所有以 '/api2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api2': ''}}}}
}
/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080changeOrigin默认值为true
*/
	axios.get('http://localhost:8080/api/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)}

优缺点

优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
加上前缀,走代理,不加前缀,不走代理

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

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

相关文章

R语言空气污染数据的地理空间可视化和分析:颗粒物2.5(PM2.5)和空气质量指数(AQI)...

原文链接:http://tecdat.cn/?p23800 由于空气污染对公众健康的不利影响,人们一直非常关注。世界各国的环境部门都通过各种方法(例如地面观测网络)来监测和评估空气污染问题(点击文末“阅读原文”获取完整代码数据&…

可拖动表格

支持行拖动&#xff0c;列拖动 插件&#xff1a;sortablejs UI: elementUI <template><div><hr style"margin: 30px 0;"><div><!-- 数据里面要有主键id&#xff0c; 否则拖拽异常 --><h2 style"margin-bottom: 30px&qu…

打开谷歌浏览器远程调试功能

谷歌浏览器远程调试功能 首先我们来启动Chrome的远程调试端口。你需要找到Chrome的安装位置&#xff0c;在Chrome的地址栏输入chrome://version就能找到Chrome的安装路径 开启远程控制命令 文件路径/chrome.exe --remote-debugging-port9222开启后的样子(注意要关闭其他谷歌浏…

Qt快捷键

#include //注意&#xff0c;头文件一定要添加 QT提供了一个很有用的调试方式&#xff1a;断点调试。这使用户可以轻易地看到自己某个部分的调试结果。下面是使用方法&#xff1a; 按下F5或者左侧的在这里插入图片描述进入调试模式&#xff0c;然后在代码的左侧设置断点 一:断…

MFC网络编程简单例程

目录 一、关于网络的部分概念1 URL(网址)及URL的解析2 URL的解析3 域名及域名解析3 IP及子网掩码4 什么是Web服务器5 HTTP的基本概念6 Socket库概念7 协议栈8 Socket库收发数据基本步骤 二、基于TCP的网络应用程序三、基于UDP的网络应用程序 一、关于网络的部分概念 1 URL(网址…

安防视频监控/视频集中存储/云存储平台EasyCVR平台无法播放HLS协议该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

基于 OV5640 摄像头理论知识讲解-成像和采样原理

基于OV2640/ OV5640 的图像采集显示系统系列文章目录&#xff1a; &#xff08;1&#xff09;基于 OV5640 摄像头理论知识讲解-成像和采样原理 &#xff08;2&#xff09;基于 OV5640 摄像头理论知识讲解-数字接口和控制接口 &#xff08;3&#xff09;基于 OV5640 摄像头理论知…

springboot第37集:kafka,mqtt,Netty,nginx,CentOS,Webpack

image.png binzookeeper-server-start.shconfigzookeeper.properties.png image.png image.png 消费 image.png image.png image.png image.png image.png image.png image.png image.png image.png Netty的优点有很多&#xff1a; API使用简单&#xff0c;学习成本低。功能强大…

Pillow:Python的图像处理库(安装与使用教程)

在Python中&#xff0c;Pillow库是一个非常强大的图像处理库。它提供了广泛的图像处理功能&#xff0c;让我们可以轻松地操作图像&#xff0c;实现图像的转换、裁剪、缩放、旋转等操作。此外&#xff0c;Pillow还支持多种图像格式的读取和保存&#xff0c;包括JPEG、PNG、BMP、…

db2迁移至oracle

1.思路 &#xff08;1&#xff09;用java连接数据库&#xff08;2&#xff09;把DB2数据导出为通用的格式如csv&#xff0c;json等&#xff08;3&#xff09;导入其他数据库&#xff0c;比如oracle&#xff0c;mongodb。这个方法自由发挥的空间比较大。朋友说他会用springboot…

BananaPi BPI-6202工业控制板全志科技A40i、24V DC输入、RS485接口

Banana Pi BPI-6202“嵌入式单板计算机”采用工业级全志A40i四核Cortex-A7处理器&#xff0c;工业温度范围和长生命周期&#xff0c;2GB DDR3&#xff0c;8GB eMMC闪存&#xff0c;M.2 SATA插槽等。 这是自 Banana Pi去年推出Banana Pi BPI-M2 Ultra SBC 和BPI-M2 Berry以来&am…

算法通关村第8关【黄金】| 寻找祖先问题

思路&#xff1a;递归三部曲 第一步&#xff1a;确定参数和返回值 题目要求找到指定的结点&#xff0c;就需要返回结点。 题目又涉及到p,q就需要传入p,q&#xff0c;需要遍历传入root 第二步&#xff1a;确定终止条件 当遍历到结点为空说明到底没找到返回空 或者遍历到p,…

华为云新生代开发者招募

开发者您好&#xff0c;我们是华为2012UCD的研究团队 为了解年轻开发者的开发现状和趋势 正在邀请各位先锋开发者&#xff0c;与我们进行2小时的线上交流&#xff08;江浙沪附近可线下交流&#xff09; 聊聊您日常开发工作中的产品使用需求 成功参与访谈者将获得至少300元京…

Xshell7和Xftp7的下载、安装及连接服务器的教程

1.下载 1.官网地址&#xff1a; XSHELL - NetSarang Website 选择学校免费版下载 2.将XSHELL和XFTP全都下载下来 2.安装 安装过程就是选择默认选项&#xff0c;然后无脑下一步 3.连接服务器 1.打开Xshell7&#xff0c;然后新建会话 2.填写相关信息 出现Connection establ…

【算法】双指针求解盛最多水的容器

Problem: 11. 盛最多水的容器 文章目录 题目解析算法原理讲解复杂度Code 题目解析 首先我们来解析一下本题 题目中说到&#xff0c;要找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 那我们现在来看最外侧的两根&#xff0c;一个高度为8&#…

Databend 开源周报第 108 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 多源数据目录 …

无涯教程-Android - Intents/Filters

Android Intent 是要执行的操作的抽象描述。它可以与 startActivity 一起启动Activity&#xff0c;将 broadcastIntent 发送给任何BroadcastReceiver组件&#xff0c;并与 startService(Intent)或 bindService(Intent&#xff0c;ServiceConnection&#xff0c;int)与后台服务进…

华硕笔记本摄像头倒置怎么办?华硕笔记本摄像头上下颠倒怎么调整

笔记本电脑相较于台式电脑&#xff0c;更易携带&#xff0c;解决了很大一部分人的使用需求。但是笔记本电脑也存在很多不足&#xff0c;比如华硕笔记本电脑就经常会出现摄像头倒置的错误&#xff0c;出现这种问题要如何修复呢&#xff1f;下面就来看看详细的调整方法。 华硕笔记…

centos安装Nginx配置Nginx

1. 查看操作系统有没有安装Nginx which nginx 2. 使用epel的方式进行安装&#xff08;方法二&#xff09; 先安装epel sudo yum install yum-utils 安装完成后&#xff0c;查看安装的epel包即可 sudo yum install epel 3 开始安装nginx 上面的两个方法不管选择哪个&…

MySQL官网下载安装包

MySQL官网&#xff1a; MySQL MySQL 8.0官网下载地址&#xff1a; MySQL :: Download MySQL Community Server 2023-07-18 MySQL 8.1.0 发布&#xff0c;这是 MySQL 变更发版模型后的第一个创新版本 (Innovation Release) 。 如果在官网中找不到下载位置&#xff0c;点击第二个…