当前位置: 首页 > news >正文

配置代理——解决跨域问题(详解)

之前写项目的时候总会遇到配置代理的问题,可是配置了之后有时有用,有时就没有用,自己之前学的也是懵懵懂懂,于是专门花了一个小时去了解了如何配置代理跨域,然后在此记录一下,方便自己以后查阅。

一、 常用发送 ajax 请求的方式

1、通过原生的 xhr(XMLHttpRequest) 发起 ajax 请求 ——比较麻烦,真正开发中不常用

2、通过 jQuery 发起 ajax 请求 ——内部封装了XHR,但是主要操作DOM,不推荐使用

3、通过 axios 发起 ajax 请求——内部也封装了XHR,并且体积小,官方推荐使用

4、通过 fetch 发起请求——包裹两层 Promise,并且在IE浏览器中兼容性比较差,较少使用

由于官方推荐使用 axios,并且体积小,支持请求拦截器和响应拦截器,所以本篇文章主要通过  axios来进行讲解,如何配置代理,解决跨域问题。

二、跨域问题的产生

当出现以下报错,看到 CORS'Access-Control-Allow-Origin' 这两个关键信息的时候,就说明出现跨域问题了

(一)产生问题

所谓跨域就是违背了同源策略,同源策略是一个著名的安全策略,规定了协议名,主机名,端口号这三个要一致。下面用图来详细讲解一下刚刚的流程

 这是刚刚发请求的过程,根据上图可以看出来,请求已经发出去了,浏览器也已经把数据返回回来了,可是为什么我们拿不到呢,这是因为浏览器发现你跨域了,所以它将数据握在了自己手里,没有给我们。

(二)注意事项

这里有很多人以为产生跨域的时候,连请求都没有发出去,这样理解是错误的,请求已经发出去了,服务器也把数据返回回去了,只不过浏览器没有给我们罢了,这个一定要记住!

三、如何解决跨域

1、CORS 解决跨域

cors 解决跨域,不需要前端做任何事情,只需要后端返回数据的时候加特殊的响应头即可。这里就不对 CORS 进行详细的讲解了,如果有感兴趣的同学可以去看我这篇文章,里面详细讲解了CORS的实现:CORS如何实现跨域

2、jsonp 解决跨域

JSONP 解决跨域,就是利用 <script> 标签的 src 属性可以加载跨域的 JavaScript 脚本这一特性实现的。与普通的 Ajax 请求不同,在使用 JSONP 进行跨域请求时,服务器不再返回 JSON 格式的数据,而是返回一段调用某个函数的 JavaScript 代码,在 src 属性中调用,来实现跨域。这里我也不多赘述,如果有感兴趣的同学可以看我这篇文章,里面详细讲解了 jsonp 的实现:jsonp 详解

3、代理服务器解决跨域(本节重点)

代理服务器解决跨域问题,代理服务器与浏览器同源,不存在跨域问题,代理服务器与服务器非同源,但是服务器与服务器之间采用 http 请求,不存在跨域问题,所以这样就非常巧妙的解决了跨域的问题。下面我用图来帮助大家理解一下这段话

 

四、具体实现代码

(一)如何开启代理服务器

1、nginx:需要熟练后端,学习成本大,这里不使用

2、vue-cli:利用脚手架,代码简单,方便上手,这里主要讲解这个

(二)代码实现(proxy)

1、配置单个代理

 

// vue.config.js 文件中设置module.exports={devServer:{proxy:'http://localhost:5000' } 
}

优点:配置简单

缺点:1、不能配置多个代理

           2、不能灵活控制到底走不走代理

2、配置多个代理  

// vue.config.js 文件中设置
module.exports={devServer:{proxy:{'/api01':{ target:'http://localhost:5000',// 重写请求pathRewrite:{'^/api01':''}},'/api02':{target:'http://localhost:5001',// 重写请求pathRewrite:{'^/api02':''}}}}
}

优点:可以灵活控制到底走不走代理

缺点:配置略微有点繁琐

写在最后,制作不易,如果对你有用,请留下一个免费的赞!

相关文章:

配置代理——解决跨域问题(详解)

之前写项目的时候总会遇到配置代理的问题&#xff0c;可是配置了之后有时有用&#xff0c;有时就没有用&#xff0c;自己之前学的也是懵懵懂懂&#xff0c;于是专门花了一个小时去了解了如何配置代理跨域&#xff0c;然后在此记录一下&#xff0c;方便自己以后查阅。 一、 常用…...

VScode 避免逗号、括号时自动补全

设置项 控制是否应在遇到提交字符时接受建议。例如&#xff0c;在JavaScript中&#xff0c;半角分号(;)可以为提交字符&#xff0c;能够在接受建议的同时键入该字符。 "editor.acceptSuggestionOnCommitCharacter": false起因 比如打伪代码的时候输入一些缺少上下…...

【数学建模】时间序列分析

文章目录 1. 条件2. 模型分类3. SPSS处理时间序列 1. 条件 1.使用于具有时间、数值两种要素 2.数据具有周期性可以使用时间序列分解 2. 模型分类 叠加模型【YTSCI】 序列的季节波动变化越来越大&#xff0c;反映变动之间的关系发生变化乘积序列【YTSC*I】 时间序列波动保持恒…...

Spring使用注解进行对象装配(DI)

文章目录 一. 什么是对象装配二. 三种注入方式1. 属性注入2. 构造方法注入3. Setter注入 三. 三种注入方式的优缺点四. 综合练习 通过五大类注解可以更便捷的将对象存储到 Spring 中&#xff0c;同样也可以使用注解将已经储存的对象取出来&#xff0c;直接赋值到注解所在类的一…...

数学建模-蒙特卡洛模拟

%% 蒙特卡罗用于模拟三门问题 clear;clc %% &#xff08;1&#xff09;预备知识 % randi([a,b],m,n)函数可在指定区间[a,b]内随机取出大小为m*n的整数矩阵 randi([1,5],5,8) %在区间[1,5]内随机取出大小为5*8的整数矩阵 % 2 5 4 5 3 1 4 2 %…...

Pearson correlation皮尔逊相关性分析

在参数检验的相关性分析方法主要是皮尔逊相关&#xff08;Pearson correlation&#xff09;。既然是参数检验方法&#xff0c;肯定是有一些前提条件。皮尔逊相关的前提是必须满足以下几个条件&#xff1a; 变量是连续变量&#xff1b;比较的两个变量必须来源于同一个总体&…...

P1036 [NOIP2002 普及组] 选数

题目描述 已知 &#xfffd;n 个整数 &#xfffd;1,&#xfffd;2,⋯ ,&#xfffd;&#xfffd;x1​,x2​,⋯,xn​&#xff0c;以及 11 个整数 &#xfffd;k&#xff08;&#xfffd;<&#xfffd;k<n&#xff09;。从 &#xfffd;n 个整数中任选 &#xfffd;k 个…...

css终极方案PostCSS

一见如故 原理 所有的css框架都在一样的事&#xff0c;那就是由一个css生成一个新的css&#xff0c;那么postcss就来做了一个抽离&#xff1a; 1、将原有的css解析成抽象语法树 2、中间经过若干个插件 3、重新文本化&#xff0c;形成新的css postcss.config.js module.expor…...

代码随想录算法训练营第三天|417. 太平洋大西洋水流问题|24. 两两交换链表中的节点|19.删除链表的倒数第N个节点|面试题 02.07. 链表相交|

417. 太平洋大西洋水流问题 水往高处流&#xff0c;先记录两个海祥往高处流所能留到的地址&#xff0c;之后将他们的合并区域进行输出 static const int dirs[4][2] {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};class Solution { public:vector<vector<int>> heights;v…...

【Java】Spring——创建Spring + 对Spring的存储 /读取对象操作

文章目录 前言一、创建Spring项目二、向Spring容器中存储 Bean 对象三、从Spring容器中读取 Bean 对象得到Spring上下文对象得到 Bean 对象 总结 前言 本人是一个普通程序猿!分享一点自己的见解,如果有错误的地方欢迎各位大佬莅临指导,如果你也对编程感兴趣的话&#xff0c;互…...

RTPSv2.2(中文版)

实时发布订阅协议 &#xff08;RTPS&#xff09; DDS互操作性 有线协议规范 V2.2 &#xff08;2014-09-01正式发布&#xff09; https://www.omg.org/spec/DDSI-RTPS/2.2/PDF 目 录 1 范围Scope 9 2 一致性Conformance 9 3 参考文献References 9 4 术语和定义Terms a…...

Django学习笔记-视图(views)的使用

Django中可以使用views进行管理&#xff0c;类似于WPF的MVVM的ViewModel层&#xff0c;也相当于MVC架构的模Controller层。 一、基于函数的视图FBV&#xff08;Function-Based View&#xff09; 通过定义一个函数&#xff0c;包含HttpRequest对象作为参数&#xff0c;用来接受…...

四姑娘山三日游

趁着小孩放暑假&#xff0c;从昆明回来之后&#xff0c;直接自驾到四姑娘山。 第一天 成都-四川省阿坝藏族羌族自治州小金县日隆镇(20230711) 大概9:30从成都市郫都区出发&#xff0c;路线如下&#xff1a;郫都—都江堰–映秀—耿达—卧龙—四姑娘山&#xff0c;中途翻过巴朗…...

spinal HDL语法学习

1 赋值语句 用来声明变量 : 用来对变量进行赋值 2 when otherwise前面是否有"."与otherwise是否换行有关系 3 case class 对Bundle进行扩展时&#xff0c;需要case class case class和class主要有两点区别&#xff1a; &#xff08;1&#xff09;case class不需…...

GRE TAP的工作原理与5G工业物联网中的应用

随着互联网新技术的发展以及智能化水平的提高&#xff0c;各企业对实时数据传输的需求也在不断提升&#xff0c;企业愈发重视数据中心的建设&#xff0c;以保障企业内网数据安全。 GRE&#xff08;Generic Routing Encapsulation&#xff0c;通用路由封装&#xff09;协议属于…...

NFT和数字藏品的安全方案解析

一、NFT和数字藏品 01 NFT是什么&#xff1f; NFT 是Non-Fungible Tokens 的缩写&#xff0c;意思是不可互换的代币&#xff0c;它是相对于可互换的代币而言的。不可互换的代币也称为非同质代币。什么是可互换的代币&#xff1f;比如BTC&#xff08;比特币&#xff09;、ETH&…...

第四篇-Miniconda3-CentOS7-安装

Miniconda3-CentOS7-安装 Conda可以创建你需要的不同版本的Python环境&#xff0c;做的各个环境之间隔离,可以有助于我们一台主机部署不同版本运行环境 下载 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh执行 sh Miniconda3-latest-Linux-…...

高效率,38V最大输入单电感同步升/降稳压器SYV939C

SYV939是一种高压同步降压-升压转换器。该器件工作在4V至28V的宽输入电压范围内&#xff0c;具有10max平均电感电流能力。四个集成的低RDS(ON)开关最大限度地减少了传导损耗。 SYV939c包括完整的保护功能&#xff0c;如输出过流/短路保护&#xff0c;过压保护和热停机&#xff…...

mars3d绘制区域范围(面+边框)

1、图例&#xff08;绿色面区域白色边框&#xff09; 2、代码 1&#xff09;、绘制区域ts文件 import { mapLayerCollection } from /hooks/cesium-map-init /*** 安全防護目標* param map*/ export const addSafetyProtection async (map) > {const coverDatas await m…...

HTML的表格应用

HTML 中的表格用于在网页上展示和组织数据。表格由行和列组成&#xff0c;每个单元格可以包含文本、图像或其他 HTML 元素。下面是一些常用的 HTML 表格标签和属性的应用示例&#xff1a; <table> 标签: 定义表格的起始和结束标记。所有的表格元素应该放在这对标签之间。…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...