跨域问题前端解决

由于浏览器的同源策略,前后端分离的项目,调试的时候总是会遇到跨域的问题,这里通过修改前端代码解决跨域问题。

首先先查看前端代码的根目录下,有没有vue.config.js文件, 若有,使用方法1,若没有此文件,使用方法2

方法1

将vue.config.js修改如下:

module.exports = {devServer: {// 设置为0.0.0.0则所有的地址均能访问host: '0.0.0.0',port: 8080,https: false,hotOnly: false,// 跨域问题解决 代理(关键部分)proxy: {'/api': {target: 'http://localhost:8081',  // 设置后端接口的访问地址changeOrigin: true,pathRewrite: {'^/api': ''  // 将请求路径中的 '/api' 替换为空字符串}}}}
}

方法2

在项目根目录的/config/index.js文件中,找到 proxyTable,然后进行同样的配置:

proxyTable: {'/api': {target: 'http://localhost:8081',  // 设置后端接口的访问地址changeOrigin: true,pathRewrite: {'^/api': ''  // 将请求路径中的 '/api' 替换为空字符串}}},
通过方法1或者方法2配置好之后,设置axios请求的baseURL属性: '/api',相当于用'/api'代理请求后端的url
const request = axios.create({baseURL: '/api',timeout: 5000
});export default request;

可以参考我的方式,将请求的API进行封装 

import Vue from 'vue'
import request from '@/api/request'// axios.defaults.baseURL = "/api"
export function postAction(url, parameter) {return request({url: url,method: 'post',data: parameter})
}

在调用后端接口时,传参时只需要拼接后面那部分就可以了

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

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

相关文章

Elasticsearch 报错index_closed_exception

index_closed_exception 是 Elasticsearch 中的一个异常类型,它通常发生在尝试对一个已经被关闭(closed)的索引执行搜索、写入或其他操作时。在 Elasticsearch 中,索引是用来存储和检索数据的逻辑命名空间,可以将其类比…

LearnOpenGL-笔记-其九

今天让我们完结高级OpenGL的部分: Instancing 很多时候,在场景中包含有大量实例的时候,光是调用GPU的绘制函数这个过程都会带来非常大的开销,因此我们需要想办法在每一次调用GPU的绘制函数时尽可能多地绘制,这个过程就…

PDF预览-搜索并高亮文本

在PDF.js中实现搜索高亮功能可以通过自定义一些代码来实现。PDF.js 是一个通用的、基于Web的PDF阅读器,它允许你在网页上嵌入PDF文件,并提供基本的阅读功能。要实现搜索并高亮显示文本,你可以通过以下几个步骤来完成: 1. 引入PDF…

二叉树——队列bfs专题

1.N叉树的层序遍历 我们之前遇到过二叉树的层序遍历,只需要用队列先进先出的特性就可以达到层序遍历的目的。 而这里不是二叉树,也就是说让节点的孩子入队列时不仅仅是左右孩子了,而是它的所有孩子。而我们看这棵多叉树的构造,它…

Python高级爬虫之JS逆向+安卓逆向1.1节-搭建Python开发环境

目录 引言: 1.1.1 为什么要安装Python? 1.1.2 下载Python解释器 1.1.3 安装Python解释器 1.1.4 测试是否安装成功 1.1.5 跟大神学高级爬虫安卓逆向 引言: 大神薯条老师的高级爬虫安卓逆向教程: 这套爬虫教程会系统讲解爬虫的初级&…

Windows 安装和使用 ElasticSearch

SpringBoot3 整合 Elasticsearch 1. ElasticSearch 1.1 ES (1)ES 是一个开源的分布式搜索和分析引擎,专为处理大模型数据而设计,它能够实现近乎实时的数据检索、分析和可视化,广泛用于全文搜索、日志分析和监控&…

matplotlib初探

库引入 import matplotlib.pyplot as pltpyplot.figure 创建新图形或激活现有图形

NVM 多版本Node.js 管理全指南(Windows系统)

🧑 博主简介:CSDN博客专家、全栈领域优质创作者、高级开发工程师、高级信息系统项目管理师、系统架构师,数学与应用数学专业,10年以上多种混合语言开发经验,从事DICOM医学影像开发领域多年,熟悉DICOM协议及…

实验室预约|实验室预约小程序|基于Java+vue微信小程序的实验室预约管理系统设计与实现(源码+数据库+文档)

实验室预约小程序 目录 基于微信小程序的实验室预约管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 (1)管理员登录 (2)实验室管理 (3)公告信息管理…

SpringBoot底层-数据源自动配置类

SpringBoot默认使用Hikari连接池,当我们想要切换成Druid连接池,底层原理是怎样呢 SpringBoot默认连接池——Hikari 在spring-boot-autoconfiguration包内有一个DataSourceConfiguraion配置类 abstract class DataSourceConfiguration {Configuration(p…

面试算法高频03-递归

认识递归 递归的概念与特性:递归本质类似循环,是通过函数体进行的循环操作。借助电影《盗梦空间》类比,递归如同主角在不同梦境层穿梭,向下进入不同递归层,向上能回到原来一层,每一层环境和周围元素相似&a…

linux Gitkraken 破解

ubuntu 安装 Gitkraken 9.x Pro 版本_gitcracken.git-CSDN博客

设计模式简述(十一)装饰器模式

装饰器模式 描述基本使用使用 描述 装饰器模式是一种功能型模式 用于动态增强对象的功能 这么一说感觉上和代理模式有些类似 抽象装饰器 要实现原有业务接口,并注入原有业务对象 至于对原有业务对象的调用,可以采用private业务对象 实现业务接口方法的…

【NetCore】ControllerBase:ASP.NET Core 中的基石类

ControllerBase:ASP.NET Core 中的基石类 一、什么是 ControllerBase?二、ControllerBase 的主要功能三、ControllerBase 的常用属性四、ControllerBase 的常用方法2. 模型绑定与验证3. 依赖注入五、ControllerBase 与 Controller 的区别六、实际开发中的最佳实践七、总结在 …

DE2-115分秒计数器

一、模块设计 如若不清楚怎么模块化,请看https://blog.csdn.net/szyugly/article/details/146379170?spm1001.2014.3001.5501 1.1顶层模块 module top_counter(input wire CLOCK_50, // 50MHz时钟input wire KEY0, // 暂停/继续按键out…

ubuntu git cola gui

直接的方法, samba, win 里用 tortoiseSVN 需要先在命令行,运行 git 命令,看到操作提示, 按照提示做 然后右键看 git diff 其它的方法 linux下可视化git工具git-cola安装与使用(HTTP方式)_git…

每日一题(小白)回溯篇4

深度优先搜索题:找到最长的路径,计算这样的路径有多少条(使用回溯) 分析题意可以得知,每次向前后左右走一步,直至走完16步就算一条走通路径。要求条件是不能超出4*4的范围,不能重复之前的路径。…

【数据分享】2000—2020年我国250m精度灌溉农田栅格数据(免费获取)

灌溉农田是指通过水利灌溉为农作物提供必要水分,以维持其生长需求的农田类型。灌溉农田占全球农田的20%,占全球粮食产量的40%。但其消耗了60%-70%的淡水和80%-90%的消耗性用水量。中国是世界上灌溉面积最大的农业大国,但中国仅占世界上8%的农…

MySQL-SQL-DML语句、INSER添加数据、UPDATE更新数据、DELETE删除数据

一. DML 1. DML的英文全称是Data Manipulation Language(数据操作语言),用来对数据库中表的数据记录进行增、删、改操作。 2. 添加数据(INSERT);修改数据(UPDATE);删除数据(DELETE) 二. DML-INSER添加数据 -- DML insert -- 指定字段添加数…

使用SymPy求解矩阵微分方程

引言 在数学、物理、工程等领域,微分方程常常被用来描述系统的变化和动态过程。对于多变量系统或者多方程系统,矩阵微分方程是非常常见的,它可以用来描述如电路、控制系统、振动系统等复杂的动态行为。今天,我们将通过Python 中的 SymPy 库来求解矩阵微分方程,帮助大家轻…