【第16章】Vue实战篇之跨域解决

文章目录

  • 前言
  • 一、浏览器跨域
  • 二、配置代理
    • 1.公共请求
    • 2.代理配置
  • 总结


前言

前后端项目分离衍生出浏览器跨域问题,开发之前我们通过配置代理解决这个问题。


一、浏览器跨域

浏览器的跨域问题主要是由于浏览器的同源策略导致的。同源策略是浏览器的一个安全功能,它限制了来自不同源的“document”或脚本,在没有明确权限的情况下,不能读取或修改另一个源的资源。这主要是为了防止恶意文档,减少可能被恶意攻击的风险。
在这里插入图片描述

二、配置代理

1.公共请求

//定制请求的实例//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})//添加响应拦截器
instance.interceptors.response.use(result=>{return result.data;},err=>{alert('服务异常');return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;

2.代理配置

vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {proxy: {  '/api': {  target: 'http://localhost:8080', // 实际要请求的服务器 URL  changeOrigin: true, // 允许跨域  rewrite: (path) => path.replace(/^\/api/, '')// 重写路径  }  }}
})

总结

回到顶部

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

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

相关文章

OpenGL3.3_C++_Windows(11)

git submodule项目子模块 Git Submodule (子模块的代码并不直接存储在父仓库中,而是通过一个指针来维护)克隆含有子模块的仓库时,使用git管理Git Clone (复制一份完整的Git仓库到本地)若仓库包含子模块&am…

【设计模式-12】代理模式的代码实现及使用场景

 代理模式是一种应用很广发的结构性设计模式,它的设计初衷就是通过引入新的代理对象,在客户端和目标对象之间起到中介的作用,从而实现控制客户端对目标对象的访问,比如增强或者阉割某些能力。 1. 概述 代理模…

《优化接口设计的思路》系列:第1篇—什么是接口缓存

一、缓存的定义: 缓存是一种存储数据的技术,用于提高数据访问的速度和效率。缓存通常存储在内存中,因为内存访问速度远快于磁盘和网络。数据接口通常会使用缓存技术,以降低对后端数据存储和处理的压力,提高系统性能。…

⭐ ▶《强化学习的数学原理》(2024春)_西湖大学赵世钰 Ch3 贝尔曼最优公式 【压缩映射定理】

PPT 截取必要信息。 课程网站做习题。总体 MOOC 过一遍 1、视频 学堂在线 习题 2、过 电子书,补充 【下载:本章 PDF 电子书 GitHub 界面链接】 [又看了一遍视频] 3、总体 MOOC 过一遍 习题 学堂在线 课程页面链接 中国大学MOOC 课程页面链接 B 站 视频链…

c++qt合并两张灰度图像

需求:将两张尺寸相同的灰度图像进行合并,合并后的图像,每个像素点灰度值为两张原图对应像素点灰度值之和。若超过255,则最大为255。 方法一: 将图像读取为cv::Mat,再调用opencv的cv::add方法,进…

【ai】初识pytorch

初识PyTorch 大神的例子运行: 【ai】openai-quickstart 配置pycharm工程 简单例子初识一下Pytorch 好像直接点击下载比较慢? 大神的代码 在这个例子中,首先定义一个线性模型,该模型有一个输入特征和一个输出特征。然后定义一个损失函数和一个优化器,接着生成一些简单的线性…

Golang内存模型与分配机制

简述 mheap为堆,堆和进程是一对一的;mcentral(小mheadp),mcahe(GMP的P私有),分配内存顺序由后向前。 在解决这个问题,Golang 在堆 mheap 之上,依次细化粒度&a…

前端构建工具用得好,构建速度提升 10 倍

今天来盘点一下前端构建工具。 Turbopack Turbopack,由Vercel开源,是下一代高性能的JavaScript应用构建工具,目前用于 Next.js 中。Turbopack旨在通过革新JavaScript应用的打包流程来显著提升应用性能,它专注于缩短加载时间&…

Python工具箱系列(五十三)

​​水印 水印是一种常见的图片处理需求。当既需要展示,又需要保护知识产权时,就需要使用文字或者图片来打水印。下面的代码展示了文字水印与图片水印的过程。 ​--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown from pat…

游戏找不到steam_api64.dll无法继续执行代码的解决方法

在电脑使用过程中,我们可能会遇到一些错误提示,其中之一就是“steam_api64.dll丢失”。那么,steam_api64.dll到底是干嘛的?为什么会丢失?对电脑有什么具体影响?如何解决这个问题?本文将为您详细…

Python基础教程(九):Lambda 函数

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

vivado NODE、PACKAGE_PIN

节点是Xilinx部件上用于路由连接或网络的设备对象。它是一个 WIRE集合,跨越多个瓦片,物理和电气 连接在一起。节点可以连接到单个SITE_, 而是简单地将NETs携带进、携带出或携带穿过站点。节点可以连接到 任何数量的PIP,并且也可以…

基于QT5.12.7的VTK8.2下的VS2015 X64源码编译以及测试

有一段时间没更新博客了,最近在考虑使用VTK作为软件的后处理显示,相比于OSG,VTK在后处理上集成了很多优秀的算法,使用起来比较方便,而且后处理一般不需要太多的交互,所以VTK是一个不错的选择。 之前对VTK了…

【多视图感知】BEVFormer: Learning Bird’s-Eye-View Representation

BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 论文链接:http://arxiv.org/abs/2203.17270 代码链接:https://github.com/fundamentalvision/BEVFormer 一、摘要 本文提出了一种名为BEVFormer的新框架&am…

智慧班牌系统源码,智慧校园云平台系统,基于小程序原生开发的智慧校园小程序源码

智慧班牌系统,也被称为电子班牌系统,是一款专为学校打造的信息化产品,用于加强学校班级文化建设和班级风采展示。该系统通过整合学校对外宣传、日常互动交流、教师教学办公、课外学习延伸、智能硬件接入等各种服务,为老师、家长、…

数据库原理(数据库设计)——(3)

一、数据库设计概述 1.数据库设计的基本任务和目标 基本任务 根据用户的信息需求、数据库操作需求,设计一个结构合理、使用方便、效率高的数据库。 设计目标 满足用户的应用要求;准确模拟现实世界;能背某个DBMS(数据库管理系统…

使用超声波麦克风阵列预测数控机床刀具磨损

预测性维护是使用传感器数据来推断机器状态,并从这些传感器数据中检测出在故障发生之前存在的缺陷或故障的过程。预测性维护在所有工业领域都是一种日益增长的趋势,包括轴承故障检测、齿轮磨损检测或往复式机器中的活塞磨损等许多其他例子。在预测性维护…

PV180R1K1T1NMMC派克通轴传动结构柱塞泵

PV180R1K1T1NMMC派克通轴传动结构柱塞泵 派克柱塞泵的结构组成部分:柱塞、手把、斜盘、压盘、滑履、泵体、配油盘、传送轴。其优点如下: 1、结构紧凑耐用,具有灵活的安装接口 2、安静的工作 3、效率高 4、降低功耗和减少发热 5、具有“…

最适合程序员的编程字体,漂亮、独特、优雅!(2024-06-17)

Monaco Monaco 字体是一款专为编程和代码编辑设计的等宽字体,以其简洁明了的无衬线设计风格、高可读性和清晰的字符区分度,受到开发者们的青睐,Mac 自带 Monaco 字体。 Consolas Consolas 是一款等宽无衬线字体,专为编程和代码编…

ElementPlus国际化(将组件的默认语言改为中文)

文章目录 1. Element-plus的默认语言2. 编辑 main.js 文件3. 效果(以分页条组件为例) 1. Element-plus的默认语言 Element-plus的默认语言是英语,可修改为其它语言 2. 编辑 main.js 文件 import {createApp} from vue import ElementPlus …