vue 项目配置跨越

要在vue开发中实现跨域需要先进入到vue项目根目录,找到vue.config.js文件,然后在proxy中设置跨域:

devServer: {

        proxy: {

                '/api': {

                        target: `http://47.93.220.246:8300`,

                        changeOrigin: true,

                        pathRewrite: {

                                '^/api': '',

                        },

                },

        },

},

在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器

以下是我在开发vue项目中实现跨域的步骤:

1、在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!

2、在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了

 

3、假如请求的真正地址为:http://47.93.220.246:8300/cloud-auth/auth/,但我们在浏览器上会看到是这样的: http://localhost:8080/api/cloud-auth/auth/ ,多了个/api,但并不影响我们请求数据。 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

51单片机应用从零开始(一)

1. 单片机在哪里 单片机是一种集成电路芯片,通常被嵌入到电子设备中用于控制和处理数据,例如家电、汽车、电子玩具、智能家居等。因此,你可以在许多电子设备中找到单片机的存在。单片机通常被放置在设备的主板或控制板上。 2. 单片机是什么…

Flink 基础 -- 尝试Flink

官网 文档 v1.18.0 下载 数据流上的状态计算(Stateful Computations over Data Streams) Apache Flink是一个框架和分布式处理引擎,用于无界和有界数据流的有状态计算。Flink被设计成可以在所有常见的集群环境中运行,以内存中的速度和任何规模执行计…

超详细介绍对极几何和立体视觉及 Python 和 C++实现

您是否想过为什么戴着特殊的 3D 眼镜观看电影时可以体验到美妙的 3D 效果?或者为什么闭上一只眼睛很难接住板球?这一切都与立体视觉有关,立体视觉是我们用双眼感知深度的能力。这篇文章使用 OpenCV 和立体视觉为计算机提供这种感知深度的能力。代码以 Python 和 C++ 形式提供…

28 nacos多环境配置共享

1.3.配置共享 其实微服务启动时,会去nacos读取多个配置文件,例如: [spring.application.name]-[spring.profiles.active].yaml,例如:userservice-dev.yaml [spring.application.name].yaml,例如&#xff…

25期代码随想录算法训练营第十四天 | 二叉树 | 递归遍历、迭代遍历

目录 递归遍历前序遍历中序遍历后序遍历 迭代遍历前序遍历中序遍历后序遍历 递归遍历 前序遍历 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # …

2023年05月 Python(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 下列程序段的运行结果是?( ) def s(n):if n==0:return 1else:

P6入门:项目初始化3-项目详情之记事本Notebook

前言 使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等&…

Leetcode刷题详解——优美的排列

1. 题目链接:526. 优美的排列 2. 题目描述: 假设有从 1 到 n 的 n 个整数。用这些整数构造一个数组 perm(下标从 1 开始),只要满足下述条件 之一 ,该数组就是一个 优美的排列 : perm[i] 能够被…

短信验证码实现(阿里云)

如果实现短信验证,上教程,这里用的阿里云短信服务 短信服务 (aliyun.com) 进入短信服务后开通就行,可以体验100条免费,刚好测试用 这里由自定义和专用,测试的话就选择专用吧,自定义要审核, Se…

通信信道:无线信道中衰落的类型和分类

通信信道:无线信道中衰落的类型和分类 在进行通信系统仿真时,简单的情况下选择AWGN信道,但是AWGN信道和真是通信中的信道相差甚远,所以需要仿真各种其他类型的信道,为了更清楚理解仿真信道的特点,首先回顾…

Mac上好用的翻译软件推荐 兼容m

Mac翻译软件可以用在学习,工作,生活当中,一款好用的翻译软件,具有翻译准确,翻译快速等基本特点,能够帮您提高工作效率。Mac上有什么好用的翻译软件呢?今天小编为大家整理了6款好用的Mac翻译软件…

AI:83-基于深度学习的手势识别与实时控制

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新中,…

password game

目录 password game (1-2) (3) (4) (5) (6) (7) (8) (9) (10&am…

安装包 amd,amd64, arm,arm64 都有什么区别

现在的安装包也不省心,有各种版本都不知道怎么选。 根据你安装的环境配置。 amd: 32位X86 amd64: 64位X86 arm: 32位ARM arm64: 64位ARM amd64是X86架构的CPU,64位版。amd64又叫X86_64。主流的桌面PC&am…

如何正确使用GPT工具

引言 在快速发展的数字时代,人工智能(AI)已成为科研领域的一个不可或缺的工具。特别是像ChatGPT这样的AI聊天机器人,它通过高效的语言模型和深度学习算法,为科研工作者提供了前所未有的辅助。从文献搜索到数据分析&…

如何用java写一个网站:从零搭建个性化网站

随着互联网的迅猛发展,Java作为一种强大而灵活的编程语言,为构建各类网站提供了丰富的解决方案。本文将探讨如何使用Java编写一个个性化网站,并通过具体实例进行深入分析。 第一步:选择适当的技术栈 在着手构建网站之前&#xff0…

C语言--每日五道选择题--Day8

第一题 1、下列程序的输出是&#xff08; &#xff09; #include<stdio.h> int main() {int a[12] {1,2,3,4,5,6,7,8,9,10,11,12};int *p[4];int i;for(i0;i<4;i){p[i]&a[i*3];}printf("%d\n"&#xff0c;p[3][2]);return 0; } A: 上述程序有错误 B: 6…

基于SpringBoot+Vue+mysql卓越导师双选系统设计与实现

博主介绍&#xff1a;✌Csdn特邀作者、博客专家、博客云专家、B站程序阿龙带小白做毕设系列&#xff0c;项目讲解、B站粉丝排行榜前列、专注于Java技术领域和毕业项目实战✌ 系统说明简介&#xff1a; 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较…

jbase引入连接池

网站主题和代码生成器完事之后&#xff0c;ORM成为主要工作&#xff0c;之前只是搭了ORM的大体结构&#xff0c;没有详细优化和实现。这次引入连接池、把连接串信息从配置取、调整抛出异常。 连接池包选择c3p0&#xff0c;因为他稳定&#xff0c;用的多&#xff0c;下载引入c3…

【网络奇遇记】你真的了解网络中的电路交换、分组交换和报文交换吗?

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. 电路交换1.1 电路交换讲解1.2 电路交换实例 二. 分组交换1.1 分组交换讲解1.2 分组交换实例1.3 …