跨域方案的抉择

news2024/11/14 14:15:39

前言

遇到跨域问题的时候,到底是使用CORS来解决,还是使用代理呢?
判断依据不是技术层面,而是你的生产环境。
首先要关注的是生产环境里面到底是一种什么样的情况,到底有没有跨域,然后根据生产环境的情况,来决定开发环境到底使用什么样的方案。

具体的几种场景

1

在这里插入图片描述
在这里插入图片描述

前端代码打包完成之后上传到静态资源服务器,通过某一个域名a.com去访问,然后访问过程中可能会运行一些JS,然后里面有些ajax,然后要去请求一些数据资源,如果数据服务器的访问域名是b.com,就说明在a.com里面访问了b.com,引发了跨域,即生产环境有跨域问题。不用考虑开发环境就考虑生产环境怎么解决,这种情况生产环境就只能使用JSONP(很少用)、CORS来解决。所以意味着开发环境也只能使用CORS,要是开发环境搞个代理是能解决,但是一上线就报错。

这样的话,在开发环境搭建一个类似的场景就好,比如用vue,react开发,本地服务器,一个dev-server通过localhost:8080去访问,静态资源,页面,JS,然后本地测试服务器在另一个地址,就引发了跨域,这个时候就不能使用代理,要使用CORS(后端解决)。

2

在这里插入图片描述
在这里插入图片描述

开发完后打包上传到一个静态资源目录,然后后端服务搭建好了一个服务器,但是两者中间,夹了一个反向代理,意味着用户在请求的时候,往往使用同一个域名比方说a.com可得到静态资源的首页,但是如果请求的地址是a.com/api/xxx,就被代理服务器转发到了数据服务器,也就意味着页面是a.com这样,ajax请求是a.com/api/xxx这样,生产环境就没有跨域,生产环境没有跨域的话,就不需要后端使用CORS。

所以开发环境怎么解决呢,得搞一个跟生产环境差不多的结构出来。这时候就可以给前端的开发服务器配上代理功能,在脚手架里配。就可以通过同样的地址去访问,不需要后端使用CORS,前端去解决就好了。

所以跨域到底是前端解决还是后端解决,取决于生产环境。
了解这些后,跟后端吵架就有一些依据了哈哈哈哈哈

JSONP

// www.aaa.com网页
<script>
	window.onSuccess = function(data) {
		console.log(data)
	}
</script>
<script src="https://www.bbb.com/api/getData"></script>
// https://www.bbb.com/api/getData 返回了一段字符串
'onSuccess({errno:0, data: {/*数据内容*/}})'

因为返回的字符串在script中,所以会执行

CORS

// CORS配置允许跨域 (服务端)
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081") // 或者 '*'
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With")
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
response.setHeader("Access-Control-Allow-Credentials", "true") // 允许跨域接收cookie

"多余"的options请求
在这里插入图片描述
干嘛用的???跨域请求之前的预检查,浏览器自行发起的,不影响实际功能

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

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

相关文章

yjs demo: 多人在线协作画板

基于 yjs 实现实时在线多人协作的绘画功能 支持多客户端实时共享编辑自动同步&#xff0c;离线支持自动合并&#xff0c;自动冲突处理 1. 客户端代码&#xff08;基于Vue3&#xff09; 实现绘画功能 <template><div style"{width: 100vw; height: 100vh; over…

Matlab遗传算法工具箱——一个例子搞懂遗传算法

解决问题 我们一般使用遗传算法是用来处理最优解问题的&#xff0c;下面是一个最优解问题的例子 打开遗传算法工具箱 ①在Matlab界面找到应用程序选项&#xff0c;点击应用程序(英文版的Matlab可以点击App选项) ②找到Optimization工具箱&#xff0c;点击打开 创建所需要…

[SQL开发笔记]INSERT INTO 语句:将新记录插入到数据库表中

目前&#xff0c;向数据库插入数据是数据管理的重要环节&#xff0c;它可以将数据长期保存、共享访问、保证数据的完整性和安全性&#xff0c;同时也是进行数据检索和分析的基础。其中&#xff0c;INSERT INTO 语句是SQL&#xff08;结构化查询语言&#xff09;中用于向数据库表…

【王道代码】【2.3链表】d1

关键字&#xff1a; 递归删除x&#xff1b;删除所有x&#xff1b;递归反向输出&#xff1b;删除最小结点&#xff08;2组指针&#xff09;&#xff1b;原地逆置&#xff1b;使递增有序

代码随想录二刷 Day 44

01背包问题二维做法先遍历背包或者物品都可以&#xff0c;然后是前序遍历&#xff1b; 一维做法一定先遍历物品然后遍历背包&#xff0c;遍历背包的时候是后序遍历&#xff1b;一维做法还是有点难理解&#xff0c;其实就是后面的数字还是要从前面的推导出来&#xff0c;但是如…

全球3小时气象数据集GLDAS Noah Land Surface Model L4 3 hourly 0.25 x 0.25 degree V2.1

简介 全球3小时气象数据集&#xff08;GLDAS Noah Land Surface Model L4 3 hourly 0.25 x 0.25 degree V2.1&#xff0c;简称GLDAS_NOAH025_3H 2.1&#xff09;&#xff0c;时空分辨率分别为3小时、0.25度。该数据产品于2020年1月重新处理&#xff0c;代替之前版本。前言 – …

RunnerGo 支持UI自动化的测试平台

RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块&#xff0c;覆盖了整个产品测试周期。 RunnerGo UI自动化基于Selenium浏览器自动化方案构建&#xff0c;内嵌高度可复用的测试脚本&#xff0c;测试团队无需复杂的代码编写即可开展低代码的自动化…

基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码

基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…

Oracle监听服务启动后停止

问题 解决办法 找到listener.ora文件,箭头指的地方&#xff0c;host改为localhost 如何找到listener.ora 其中1522端口&#xff0c;是我新增的监听服务。之前这个host是一个固定的ip地址&#xff0c;我更换网络环境后&#xff0c;ip地址变了&#xff0c;所以导致监听启动失败。…

基于白鲸优化的BP神经网络(分类应用) - 附代码

基于白鲸优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于白鲸优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.白鲸优化BP神经网络3.1 BP神经网络参数设置3.2 白鲸算法应用 4.测试结果&#xff1a;5.M…

【Python Numpy教程】numpy数据类型

文章目录 前言一、安装numpy包二、numpy的数据类型2.1 NumPy数据类型概述类型类型字符代码 三、创建数据类型对象3.1 numpy.dtype介绍3.2 示例代码&#xff1a; 总结 前言 NumPy是Python中最常用的科学计算库之一&#xff0c;它提供了高性能的多维数组对象&#xff08;ndarray…

CSS 滚动驱动动画 timeline-scope

timeline-scope 语法兼容性 timeline-scope 看到 scope 就知道这个属性是和范围有关, 没错, timeline-scope 就是用来修改一个具名时间线(named animation timeline)的范围. 我们介绍过的两种时间线 scroll progress timeline 和 view progress timeline, 使用这两种时间线(通…

BAT034:批处理打开电脑常用功能面板

引言&#xff1a;编写批处理程序&#xff0c;输入相应功能序号&#xff0c;实现打开打开百度搜索、启动磁盘清理、启动注册表编辑器、启动系统配置、启动控制面板、启动画图程序、启动计算器程序、启动DirectX诊断工具、启动服务、启动计算机管理、启动系统信息、启动更改适配器…

基于法医调查优化的BP神经网络(分类应用) - 附代码

基于法医调查优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于法医调查优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.法医调查优化BP神经网络3.1 BP神经网络参数设置3.2 法医调查算法应用 4.测试结果…

基于食肉植物优化的BP神经网络(分类应用) - 附代码

基于食肉植物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于食肉植物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.食肉植物优化BP神经网络3.1 BP神经网络参数设置3.2 食肉植物算法应用 4.测试结果…

《向量数据库指南》——向量数据库Milvus Cloud快速打造知识库 AI 应用

快速打造知识库 AI 应用 具备知识库的 AI Chatbot 已然是当下基于大模型技术实现及应用最多的情景,接下来,我们将以制作一个具备 Dify 产品及团队知识背景的 AI 应用为例,为大家介绍如何从零开始,用 3 步搭建一个具备企业知识库的 AI 应用。 平台注册 在本次实操演示中,我…

【RocketMQ系列五】消息示例-顺序消息延迟消息广播消息的实现

1. 前言 上一篇文章我们介绍了简单消息的实现&#xff0c;本文将主要来介绍顺序消息的实现&#xff0c;顺序消息分为局部顺序消息和全局顺序消息。 顺序消息指的是消费者在消费消息时&#xff0c;按照生产者发送消息的顺序进行消费。即先发送的先消费【FIFO】。 顺序消息分为…

凉鞋的 Godot 笔记 203. 变量的常用类型

203. 变量的常用类型 在上一篇&#xff0c;我们对变量进行了概述和简介&#xff0c;知识地图如下&#xff1a; 我们已经接触了&#xff0c;变量的字符串类型&#xff0c;以及一些功能。 在这一篇&#xff0c;我们尝试多接触一些变量的类型。 首先是整数类型。 整数类型 整…

生成指定范围内的指定个数的随机整数numpy.random.randint()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 生成指定范围内的 指定个数的随机整数 numpy.random.randint() [太阳]选择题 以下哪个选项正确地描述了上述代码的功能&#xff1f; import numpy as np arr np.random.randint(1, 10, 5) p…

第一节——vue安装+前端工程化

作者&#xff1a;尤雨溪 官网&#xff1a;简介 | Vue.js 脚手架文档 创建一个项目 | Vue CLI 一、概念&#xff08;了解&#xff09; 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&…