前端配置跨域的详细指南

在现代Web开发中,跨域资源共享(CORS, Cross-Origin Resource Sharing)是一个非常重要的概念。浏览器出于安全考虑,默认情况下不允许跨域请求。如果你需要在前端与不同源的服务器进行通信,就必须配置跨域支持。本文将介绍如何在不同环境中配置跨域。

什么是跨域?

跨域是指在浏览器中,域名、协议、端口不同的情况下请求资源的行为。例如:

请求 URL: `http://example.com/api` 和 `http://example.net/api` 是跨域的。
请求 URL: `https://example.com/api` 和 `http://example.com/api` 也是跨域的(因为协议不同)。

为什么需要跨域?

跨域策略(同源策略)是为了防止潜在的安全风险,比如 CSRF(跨站请求伪造)攻击。为了让不同来源的资源可以被共享,CORS 提供了一种安全的机制来允许服务器标识哪些域、方法、头部信息可以进行跨域请求。

CORS 的基本流程

当浏览器发出一个跨域请求时,会进行以下步骤:

1. 简单请求:如果请求方法是 GET、POST、HEAD 并且满足其他特定条件,浏览器直接发起请求。
2. 预检请求(Preflight Request):如果请求包含自定义头部信息、非简单请求方法(如 PUT、DELETE),浏览器会先发出一个 `OPTIONS` 请求以确认服务器是否允许跨域请求。
3. 服务器响应:服务器响应头部中包含跨域相关的信息,浏览器根据这些信息决定是否允许跨域请求。

配置跨域的方式

跨域配置主要在后端服务器进行。不同的后端框架和服务器有不同的跨域配置方法

1. 使用 Node.js (Express)

在 Express 中,可以使用 [CORS 中间件](https://github.com/expressjs/cors)来轻松配置跨域支持。

2. 配置跨域支持在 Nginx

Nginx 作为反向代理服务器,也可以配置跨域。

3. 使用 Spring Boot (Java)3.使用Spring Boot(Java)

在 Spring Boot 项目中,可以通过在控制器层级或者全局范围内配置跨域支持。

4. 使用 Flask (Python)

在 Flask 中,可以使用 `flask-cors` 来处理跨域请求。

本文使用配置跨域方法是在前端中解决

前端配置跨域的优点:

1. 方便开发阶段的调试:

在开发环境中,前端代理可以快速配置并解决跨域问题,避免开发时频繁遇到浏览器的同源策略限制。开发者可以轻松访问不同域名下的 API 服务器。

2. 不需要修改后端代码:

使用前端代理可以绕过后端服务器的跨域限制,不需要后端专门配置 CORS 支持。这在开发阶段尤其有用,因为后端开发者不需要额外处理跨域问题。

3.灵活性高:

前端代理可以轻松修改、启用或关闭,特别是在开发环境中,代理可以根据不同的开发需求进行灵活调整,适应不同的 API 请求。

4. 对第三方 API 友好:

在开发中,前端请求第三方 API 时,如果第三方没有开放 CORS 支持,使用前端代理可以避免跨域问题,继续调试和开发。

前端配置跨域的缺点:

1.仅在开发环境中有效:

前端代理通常只在开发环境中工作(例如使用 `webpack-dev-server`),无法用于生产环境。在生产环境中,必须通过后端服务器配置 CORS,代理不能解决实际部署中的跨域问题。

2.增加了开发环境的复杂性:

尽管代理配置简单,但它实际上并不是前端跨域问题的根本解决方案。项目的后期部署仍然需要处理跨域问题,使用代理可能会让初学者误以为跨域问题已经完全解决。

3.代理请求增加网络层次:

前端代理将请求转发到后端目标服务器,增加了一层额外的网络请求。对于大型项目或频繁的 API 请求,这可能会引入性能问题,虽然在开发环境中不明显,但它会增加调试的复杂性。

4.与真实请求环境不一致:

在开发中通过代理的方式解决跨域问题,可能会让开发者忘记在生产环境中设置真实的跨域配置,导致上线时遇到跨域错误。如果开发和生产环境的请求路径不一致,可能会导致意外的错误。

5.仅适用于浏览器环境:

前端跨域代理只解决浏览器中的跨域问题,对于其他环境(如移动应用、桌面应用)并不适用。如果你的项目需要多个客户端进行交互,就必须在服务器端解决跨域问题。

本文是在Vue 2和Vue CLI 环境中,可以通过配置开发服务器的代理来解决跨域问题。这种方法适合开发阶段,让我们能够方便地绕过跨域限制。在生产环境中,通常需要后端来处理跨域问题。

配置步骤

第一步:创建 `vue.config.js` 文件

如果你的 Vue CLI 项目根目录下还没有 `vue.config.js` 文件,可以手动创建一个。配置proxy代理

vue.config.js
module.exports = {
? devServer: {
? ? proxy: {
? ? ? '/api': {
? ? ? ? target: 'http://backend-server.com', // 目标服务器的地址
? ? ? ? changeOrigin: true, // 是否跨域
? ? ? ? pathRewrite: { '^/api': '' } // 重写路径,将 /api 去掉
? ? ? }
? ? }
? }
}

在这个配置中:

/api:是前端请求的路径前缀,可以根据需要修改,例如 `/api` 表示我们想代理所有以 `/api` 开头的请求。
target:表示你想代理到的后端服务器地址,通常是开发中使用的后端 API 服务地址。
changeOrigin:允许代理服务器修改请求头中的源(origin),以便模拟跨域。
pathRewrite:可以重写 URL 路径,把匹配到的 `/api` 前缀去掉,避免后端服务器收到请求时路径不匹配。

第二步:在前端发起请求

在 Vue 项目中使用 `axios` 或 `fetch` 进行请求时,你可以将前缀设置为 `/api`,从而触发代理功能。
使用 `axios` 发起请求:

src/api/request.js
import axios from 'axios'

// 配置基础路径,匹配 vue.config.js 中的 ‘/api’

const apiClient = axios.create({
? baseURL: '/api',
? timeout: 1000
})

// 示例请求

export const getData = () => {
? return apiClient.get('/data') // 实际请求地址为 'http://backend-server.com/data'
}```

在这里,`/api` 会被代理到 `http://backend-server.com`,然后再请求 `http://backend-server.com/data`。剩下的就是封装接口了,项目打包上线前需要把`baseURL`地址改回到真实接口地址`实际请求地址`就行了

结论

在 Vue 2 和 Vue CLI 中通过配置代理的方式可以有效解决开发环境中的跨域问题,但在生产环境中,仍然需要通过后端的 CORS 配置来处理跨域请求。这种方法简单高效,适合在项目开发过程中使用,极大地简化了前后端分离开发的跨域调试问题。

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

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

相关文章

对象克隆与单例模式

一、对象克隆 在 C 中&#xff0c;对象克隆通常可以借助拷贝构造函数和赋值运算符重载来实现&#xff0c;分为浅拷贝&#xff08;默认行为&#xff09;和深拷贝&#xff08;需要自定义实现&#xff09;。 1. 浅拷贝示例 #include <iostream> #include <string> …

Oracle virTualBox安装window10

一、下载windows10镜像 我下载的windows10镜像如下&#xff1a; 内部文件如下&#xff1a; 二、错误的安装方法 直接新建虚拟机&#xff0c;选择镜像文件&#xff1a; 启动虚拟机&#xff08;会一直提示没有启动设备&#xff0c;选择镜像后一直弹窗提示&#xff09; 三、正确…

四川托普信息技术职业学院教案1

四川托普信息技术职业学院教案 【计科系】 周次 第 1周&#xff0c;第1次课 备 注 章节名称 第1章 XML语言简介 引言 1.1 HTML与标记语言 1.2 XML的来源 1.3 XML的制定目标 1.4 XML概述 1.5 有了HTML了&#xff0c;为什么还要发展XML 1.5.1 HTML的缺点 1.5.2 XML的特点 1.6 X…

三维引擎cesium学习经验

三维引擎cesium学习经验&#xff1a; 1、初始化viewer对象 2、对entity的操作&#xff1a;添加&#xff0c;隐藏&#xff0c;修改&#xff0c;去除&#xff0c;居中显示 3、去除掉entity的双击事件 4、获取当前视角高度 5、获取经纬度在屏幕上的位置 6、获取三维场景屏幕中心点…

虚拟机VMware的安装问题ip错误,虚拟网卡

要么没有虚拟网卡、有网卡远程连不上等 一般出现在win11 家庭版 1、是否IP错误 ip addr 2、 重置虚拟网卡 3、查看是否有虚拟网卡 4、如果以上检查都解决不了问题 如果你之前有vmware 后来卸载了&#xff0c;又重新安装&#xff0c;一般都会有问题 卸载重装vmware: 第一…

图片和媒体资源的优化:提升Web应用性能与用户体验的关键

文章目录 前言一、为什么需要优化图片和媒体资源二、图片优化策略三、媒体资源优化策略四、案例研究&#xff1a;实际效果展示结语 前言 在现代Web开发中&#xff0c;图片和媒体资源&#xff08;如音频、视频&#xff09;的质量和加载速度对用户体验有着直接影响。高质量的媒体…

裸机LED 灯实验

G1、硬件原理分析 2、寄存器说明 a、主要配置寄存器 使能 GPIO1 时钟—CCM_CCGR1 设置 GPIO1_IO03 的复用功能—IOMUXC_SW_MUX_CTL_PAD_GPIO1_IO03 配置 GPIO1_IO03—IOMUXC_SW_PAD_CTL_PAD_GPIO1_IO03 设置GPIO GPIO1_GDIR 的 bit3 要设置为 1,表示输出 控制GPIO输出电平,…

LSTM长短期记忆网络

LSTM&#xff08;长短期记忆网络&#xff09;数学原理 LSTM&#xff08;Long Short-Term Memory&#xff09;是一种特殊的递归神经网络&#xff08;RNN&#xff09;&#xff0c;解决了标准RNN中存在的梯度消失&#xff08;Vanishing Gradient&#xff09; 和**梯度爆炸&#x…

FastApi教程

FastApi&#xff0c;一个用于构建 API 的现代、快速&#xff08;高性能&#xff09;的web框架。 FastApi是建立在Starlette和Pydantic基础上的&#xff0c;Pydantic是一个基于Python类型提示来定义数据验证、序列化和文档的库。Starlette是一种轻量级的ASGI框架/工具包&#x…

C++进阶-1-单继承、多继承、虚继承

C单继承详解 1. 基础概念 继承是面向对象编程中的一个核心概念&#xff0c;允许一个类&#xff08;子类或派生类&#xff09;继承另一个类&#xff08;父类或基类&#xff09;的属性和方法。单继承意味着一个类只能直接继承一个父类。这种简单的结构在许多情况下是足够的&…

C语言 文件操作——按行读写文件

目录 按行写文件 按行读文件 按行读写文件 按行写文件 int puts ( const char *s ); 将字符串 s 写入标准输出流 stdout &#xff0c;并在其后添加一个换行符 按字符串&#xff08;行&#xff09; 写 文件 int fputs ( const char *s, FILE *fp); 将字符串 s 写入 fp 所…

轻松上手:使用 Vercel 部署 HTML 页面教程

&#x1f600; 在学习前端的过程中&#xff0c;部署项目往往是一个令人头疼的问题。然而&#xff0c;Vercel 为我们提供了一个便捷且免费的解决方案。 Vercel 是一个强大的云平台&#xff0c;专门用于前端项目的部署和托管。它不仅支持多种前端框架和静态网站生成器&#xff0…

【AI系列】Paddle Speech安装指南

文章目录 环境依赖1. 安装Python1.1 下载Python安装包1.2 安装gcc1.3 安装依赖库1.4 编译和安装Python1.5 配置环境变量 2. 安装PaddlePaddle3. 安装PaddleSpeech4. 运行PaddleSpeech5. 解决常见问题5.1 错误&#xff1a;libssl.so.1.1解决方法&#xff1a; 5.2 错误&#xff1…

2-6-1 关于“QNX Neutrino 编程入门”的前言

阅读前言 本文以QNX系统官方的文档英文原版资料“Getting Started with QNX Neutrino: A Guide for Realtime Programmers”为参考&#xff0c;翻译和逐句校对后&#xff0c;对在QNX操作系统下进行应用程序开发及进行资源管理器编写开发等方面&#xff0c;进行了深度整理&…

【中标麒麟服务器操作系统实例分享】java应用DNS解析异常分析及处理

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 情况描述 中标麒麟服务器操作系统V7运行在 ARM虚…

StarRocks 排查单副本表

文章目录 StarRocks 排查单副本表方式1 查询元数据&#xff0c;检查分区级的副本数方式2 SHOW PARTITIONS命令查看 ReplicationNum修改副本数命令 StarRocks 排查单副本表 方式1 查询元数据&#xff0c;检查分区级的副本数 # 方式一 查询元数据&#xff0c;检查分区级的副本数…

基于Transformer的自编码器模型在故障检测中的应用

在现代工业和制造领域&#xff0c;故障检测是保证设备和生产线安全、高效运行的关键。传统的故障检测方法往往依赖于人工经验或规则&#xff0c;然而&#xff0c;这些方法的准确性和泛化能力有限。随着深度学习技术的迅速发展&#xff0c;越来越多的智能故障检测方法应运而生&a…

《XML》教案 第2章 使第4章 呈现XML文档

《XML》教案 第2章 使第4章 呈现XML文档 主讲人&#xff1a; 回顾上一章: [10分钟] 2 课程知识点讲解&#xff1a; 2 通过级联样式表转换XML文档&#xff1a;[15分钟] 3 通过可扩展样式表语言转换XML文档 &#xff1a;[5分钟] 4 嵌套 for 循环 &#xff1a;[20分钟] 5 本章总结…

HBase、Hive、Redis 和 MongoDB的对比

1. 数据库管理 操作HBaseHiveRedisMongoDB创建数据库N/A (HBase 没有数据库概念)CREATE DATABASE db_name;N/A (Redis 没有数据库命名功能)use db_name; (自动创建)查看数据库N/ASHOW DATABASES;INFO 查看全局信息show dbs;删除数据库N/ADROP DATABASE db_name CASCADE;N/Adb.…

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导 Sigrity System Explorer Snip Via Pattern From Layout模式支持从其它设计中截取过孔模型用于仿真分析,同样以差分模板为例 具体操作如下 双击打开System Explorer软件…