vue3+cli-service配置代理,跨域请求

一、配置代理端口和代理转发

在vue.config.js文件中 

const {defineConfig} = require('@vue/cli-service')module.exports = defineConfig({devServer: {host: '0.0.0.0',port: 8088,  // 启动端口号proxy: {'/api': { // 请求接口中要替换的标识target: '', // 代理地址,后端地址ChangeOrigin: true, // 是否允许跨域pathRewrite: {'^/api': '' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可}}}}
})

二、配置接口请求

是一个http.js文件,根据自己需求放在适合的文件夹里,文件名自己也可以定义

import axios from 'axios'
const isDev = process.env.NODE_ENV === 'development'
const instance = axios.create({//TODO 部署修改线上地址// baseURL: isDev ? 'http://localhost:8088/api' : '线上地址',baseURL: '/api',timeout: 10000,withCredentials: true,
})// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 前端发送请求成功const res = response.data//根据返回的code值来做不同处理// 请求失败,返回错误信息if (res.code !== 0) {// 未登录跳转登录页面if (res.code === 40100) {const redirectUrl = window.location.hrefwindow.location.href = `/user/login?redirect=${redirectUrl}`}console.error('request error', res.message)return res.message}return res},function (error) {// 超出 2xx 范围的状态码都会触发该函数。return Promise.reject(error)},
)/*** get请求* @param url 请求地址* @param params 请求参数*/
export function getRequest(url, params) {return instance({method: 'GET',url: `${url}`,params: params,})
}/*** post请求* @param url 请求地址* @param data 请求数据* @returns {Promise}*/
export function postRequest(url, data) {return instance({method: 'POST',url: `${url}`,data,})
}export default instance

在api/indexjs文件里使用

import { getRequest, postRequest } from '@/plugins/requestConfig'export const userLogin = (params) => {return postRequest('/user/login', params)
}

注意:

1、代理地址target后面不要加注释,线上可能会报错

2、本地测试的时候baseURL: '/api'和proxy里的'/api'名字保持一致,且必须有不然会报跨域

3、pathRewrite里的'^/api': '' "跟后端保持一致,如果后端接口里有api可以不用加,如果没有则需要进行该处理,不然接口请求会报404,

 

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

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

相关文章

金混合纳米粒子催化级联反应产生一氧化碳气体对抗糖尿病牙周炎

引用信息 文 章:Cascade Reactions Catalyzed by Gold Hybrid Nanoparticles Generate CO Gas Against Periodontitis in Diabetes. 期 刊:Advanced Science(影响因子:15.1) 发表时间:2024年…

汽车IVI中控开发入门及进阶(二十四):杰发科技AC8015

前言: 在此之前的大部分时间,四维图新更多的是以图商的身份在业内出现,但现在四维图新图商之外的技术积累提现在了杰发科技身上,或者是从图商到汽车智能化一体解决方案供应商的角色转变。汽车智能化,可以简单的归为座舱智能化和智能驾驶两个板块。 随着汽车变得越来越智能…

pvt对net delay的影响

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 有星球成员提问: pt中在同一个corner下的net的为啥在min和max的情况下读RC值是不一样的呢??不应该都是根据spef来的吗?? 回答: 这个其实是个误区,相同RC corner情况下我们看report_delay_…

《疯狂python讲义》笔记:类和对象

文章目录 1.类方法classmethod和静态方法staticmethod2.函数装饰器 1.类方法classmethod和静态方法staticmethod 类方法classmethod:第一个参数cls都会被自动绑定到类本身,无论是类还是对象都可调用。 静态方法staticmethod:无论是类还是对象…

SploitScan:一款多功能实用型安全漏洞管理平台

关于SploitScan SploitScan是一款功能完善的实用型网络安全漏洞管理工具,该工具提供了用户友好的界面,旨在简化广大研究人员识别已知安全漏洞的相关信息和复现过程。 SploitScan可以帮助网络安全专业人员快速识别和测试已知安全漏洞,如果你需…

python-web应用程序-Django-From组件

python-web应用程序-Django-From组件 添加用户时 原始方法(本质)【麻烦】 def user_add(req):if req.method GET:return render(req,XXX.html)#POST请求处理:XXXXX-用户数据没有校验 -出现错误提示 -页面上的每一个字段都需要我们重新写一遍 -关联数…

【运维项目经历|028】Cobbler自动化部署平台构建项目

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专…

【仿真建模-anylogic】桥式起重机参数化桥架数

Author:赵志乾 Date:2024-06-04 Declaration:All Right Reserved!!! 问题:anylogic物料库中的桥式起重机只能静态指定桥架数,不符合模型参数化需求; 解决方案&#xff…

java作业

以下是添加注释后的代码: public class DrinkSprite { public static void main(String[] args) { int money 50; // 初始的钱数 int price 6; // 每瓶雪碧的价格 int bottleReturn 1; // 退一个瓶子换回的钱数 int …

C++数据结构之:树Tree

摘要: it人员无论是使用哪种高级语言开发东东,想要更高效有层次的开发程序的话都躲不开三件套:数据结构,算法和设计模式。数据结构是相互之间存在一种或多种特定关系的数据元素的集合,即带“结构”的数据元素的集合&am…

Linux驱动应用编程(二)控制GPIO

本文目录 一、基础1. 命令控制方式一:使用 GPIO序号来控制。方式二:使用 GPIO组号来控制。 2. 代码控制 一、基础 我们先要通过查询开发板手册,来获取引脚口信息。这里我们以开发板OreangpiAIPro为例。查询官方手册如下: 1. 命令…

工业机器视觉系统如何实现精准检测?

机器视觉系统是指利用机器替代人眼做出各种测量和判断。一种比较复杂的系统。大多数系统监控对象都是运动物体,系统与运动物体的匹配和协调动作尤为重要,所以给系统各部分的动作时间和处理速度带来了严格的要求。在某些应用领域,例如机器人、…

NLP:将中文/英文文档切分多个句子

文章目录 1. 前言2. 步骤2.1安装 SpaCy2.2 下载模型2.3 加载模型并处理文本 1. 前言 SpaCy 是一个开源的自然语言处理库,它支持多种语言的文本处理,包括中文。SpaCy 对中文文本的处理主要依赖于其内置的中文分词器(tokenizer)。以…

Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制

多环境开发(yaml文件版) 我们在自己的开发中是自己环境 测试 生产的环境都不同 多环境分为 两个步骤 设置环境 生产环境 开发环境 测试环境 手搓三个环境 设置应用环境 应用pro配置 # 应用环境 spring:profiles:active: pro--- # 设置环境 # 生产环境 spring:profiles: p…

算法训练 | 回溯算法Part4 | 93.复原IP地址、78.子集、90.子集II

93.复原IP地址 题目链接:https://leetcode.cn/problems/restore-ip-addresses/ 文章讲解:代码随想录 回溯法 解题思路 切割问题就可以使用回溯搜索法把所有可能性搜出来 解题步骤 递归参数:startIndex一定是需要的,因为不能…

优化 PHP-FPM 参数配置:实现服务器性能提升

在Web服务器中,PHP-FPM(PHP FastCGI Process Manager)是一个重要的工具,用于管理 PHP 进程以提高性能和效率。通过合理配置 PHP-FPM 的参数,可以根据服务器的硬件配置和负载情况来优化服务器的性能。 1. 了解 PHP-FPM …

Android源码、学习路线和下载

目录 前言一、在线查看二、安卓学习路线三、源码下载 前言 学习研究android系统,最直接最好的方法就是阅读源码(Read The Fucking Source Code),本篇教程汇总一下能够查看android源码的网站和下载源码的方法 一、在线查看 aosp-mirror github网站上的AOSP源码 A…

计网期末复习指南(五):运输层(可靠传输原理、TCP协议、UDP协议、端口)

前言:本系列文章旨在通过TCP/IP协议簇自下而上的梳理大致的知识点,从计算机网络体系结构出发到应用层,每一个协议层通过一篇文章进行总结,本系列正在持续更新中... 计网期末复习指南(一):计算机…

联邦学习实现FedAVg算法

目录 PaddleFL PaddleFL概述 横向联邦学习(Horizontal Federated Learning, HFL) 纵向联邦学习(Vertical Federated Learning, VFL)

Jetpack架构组件_3. 数据绑定库双向绑定

这里介绍数据绑定库双向绑定的两种写法。第一种是模型类继承Observable,两个属性username、password的get方法上面添加bindable注解。第二种是创建一个包裹类,使用 ObservableField字段,然后再调用 this.observableField.get()获取字段。 1.…