前端面试题16(跨域问题)

在这里插入图片描述
跨域问题源于浏览器的同源策略(Same-origin policy),这一策略限制了来自不同源的“写”操作(比如更新、删除数据等),同时也限制了读操作。当一个网页尝试请求与自身来源不同的资源时,浏览器会阻止这种行为,以防止恶意网站读取另一个网站的数据。

解决前端跨域问题有多种方法,下面详细介绍几种常见的解决方案:

1. JSONP (JSON with Padding)

适用场景: 主要用于GET请求,且服务器支持JSONP响应。

原理: 利用<script>标签没有跨域限制的特点,网页可以加载来自不同源的JavaScript文件。服务器返回的不是JSON格式的数据,而是一个函数调用,这个函数的名字由请求时传递的参数指定。

示例代码:

  • 前端:
<script>function handleResponse(data) {console.log(data);}
</script>
<script src="http://example.com/data?callback=handleResponse"></script>
  • 后端 (假设使用Node.js和Express):
app.get('/data', function(req, res) {const data = { "key": "value" };const callback = req.query.callback;res.send(`${callback}(${JSON.stringify(data)})`);
});

2. CORS (Cross-Origin Resource Sharing)

适用场景: 现代Web应用广泛采用,支持各种HTTP方法。

原理: 通过在服务器端设置Access-Control-Allow-Origin响应头来允许特定源或者所有源访问资源。

服务器端设置示例 (假设使用Node.js和Express):

app.use(function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");next();
});

3. 使用代理服务器

适用场景: 开发环境中,尤其是前后端分离开发时。

原理: 设置一个代理服务器,前端的所有API请求都发送到这个代理,然后由代理转发到实际的API服务器,这样对于浏览器来说,请求都来自于同一个源。

配置示例 (使用Vue CLI的webpack配置):

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://backend.example.com',changeOrigin: true,pathRewrite: {'^/api': ''},},},},
};

4. 使用fetchXMLHttpRequest的CORS模式

虽然这不是一个独立的解决方案,但了解如何在JavaScript中利用CORS也很重要。默认情况下,现代浏览器的fetchXMLHttpRequest支持CORS,只需确保服务器正确设置了CORS头部。

示例代码 (使用fetch):

fetch('http://example.com/data', {mode: 'cors', // 默认就是cors,可以不写headers: {'Accept': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

以上是解决前端跨域问题的几种常见方法,具体选择哪种方案取决于你的应用场景和技术栈。在生产环境中,CORS是最常用且推荐的方式,因为它提供了灵活的安全控制和良好的兼容性。

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

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

相关文章

网络配置文件中type

在网络配置文件中&#xff0c;type是一个参数&#xff0c;用于指定网络接口的类型。它指定了网络接口所使用的协议或技术。 以下是一些常见的type参数值&#xff1a; “ethernet”&#xff1a;表示以太网接口&#xff0c;用于连接以太网设备&#xff0c;如有线网卡。 “wifi”…

Python实现ABC人工蜂群优化算法优化随机森林回归模型(RandomForestRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 人工蜂群算法(Artificial Bee Colony, ABC)是由Karaboga于2005年提出的一种新颖的基于群智能的全局优化…

PD虚拟机不能复制Mac的文件怎么回事 PD虚拟机不能复制Mac的文件怎么办 Parallels Desktop怎么用

PD虚拟机不仅能提供跨系统协作的服务&#xff0c;还能进行虚拟机系统与原生系统间的文件共享、文本复制、文件复制等操作&#xff0c;让系统间的资源可以科学利用。但在实际操作过程中&#xff0c;PD虚拟机不能复制Mac的文件怎么回事&#xff1f;PD虚拟机不能复制Mac的文件怎么…

linux centos7.9 安装mysql5.7;root设置客户端登录、配置并发、表名大小写敏感等

查看centos版本 cat /etc/centos-releasecentos版本为7.9 查看是否已安装mariadb,安装了需要先删除 1.查看是否安装了mariadb和mysql,安装了需要先删除 mariadb是mysql的一个分支,但要安装mysql需要删除它 执行rpm -qa|grep mariadb,查看mariadb情况 查找到有就删除 执行…

中小学白名单编程竞赛:精英竞技场的深度解析

目录 1. 引言2. 特点3. 为什么参加白名单编程竞赛4. 具体竞赛介绍4.1 全国中小学信息技术创新与实践大赛(NOC大赛)4.1.1 面向对象4.1.2 考试内容4.1.3 赛事特点4.1.4 报名时间4.1.5 含金量4.1.6 优缺点4.1.7 赛事流程4.2 蓝桥杯大赛4.2.1 面向对象4.2.2 考试内容4.2.3 赛事特…

Day59 动态规划part12

LC115不同的子序列&#xff08;未掌握&#xff09; 递推公式与LC392类似&#xff0c;但是初始化略有不同 LC392的dp数组含义为相同字符个数而本体的dp数组含义为出现的次数&#xff0c;因此dp[i][0]1 两种情况 s[i-1]t[j-1] dp[i][j] dp[i-1][j-1]dp[i][j] dp[i-1][j] s[…

Kubernetes集群性能测试之kubemark集群搭建

Kubernetes集群性能测试之kubemark集群搭建 Kubemark是K8s官方提供的一个对K8s集群进行性能测试的工具。它可以模拟出一个K8s cluster&#xff08;Kubemark cluster&#xff09;&#xff0c;不受资源限制&#xff0c;从而能够测试的集群规模比真实集群大的多。这个cluster中ma…

运维锅总详解系统启动流程

本文详细介绍Linux及Windows系统启动流程&#xff0c;并分析了它们启动流程的异同以及造成这种异同的原因。希望本文对您理解系统的基本启动流程有所帮助&#xff01; 一、Linux系统启动流程 Linux 系统的启动流程可以分为几个主要阶段&#xff0c;从电源开启到用户登录。每个…

Java笔试|面试 —— 对继承性的理解

面试/笔试&#xff1a;谈谈对继承性的理解>继承性的好处&#xff1a;-减少了代码的冗余&#xff0c;提高了复用性-提高了扩展性&#xff08;父类统一扩展、继承后扩展&#xff09;-为多态的使用&#xff0c;提供了前提>Java中继承的特点-局限性&#xff1a;类的单继承性。…

有一个日期(Date)类的对象和一个时间(Time)类的对象,均已指定了内容,要求一次输出其中的日期和时间

可以使用友元成员函数。在本例中除了介绍有关友元成员函数的简单应用外&#xff0c;还将用到类的提前引用声明&#xff0c;请读者注意。编写程序&#xff1a; 运行结果&#xff1a; 程序分析&#xff1a; 在一般情况下&#xff0c;两个不同的类是互不相干的。display函…

关于Java异常机制及finally关键字的详解

异常机制(Exception) 软件程序在运行过程中&#xff0c;非常可能遇到异常问题。常见的异常&#xff1a; 1、用户输入错误 2、设备错误 3、硬件问题&#xff0c;例如打印机关掉、服务器问题 4、物理限制&#xff1a;磁盘满了 Java是采用面向对象的方式来处理异常的。 处理过程…

基于Java的水果商品销售网站

1 水果商品销售网站概述 1.1 课题简介 随着电子商务在当今社会的迅猛发展&#xff0c;水果在线销售已逐渐演变为一种极为便捷的购物方式&#xff0c;日益受到人们的青睐。本系统的设计初衷便是构建一个功能完备、用户体验友好的水果销售平台&#xff0c;致力于为用户提供优质、…

Xcode简介

Xcode 是苹果公司为 macOS 平台开发的一款集成开发环境&#xff08;Integrated Development Environment&#xff0c;IDE&#xff09;&#xff0c;主要用于开发 iOS、iPadOS、macOS、watchOS 和 tvOS 的应用程序。Xcode 包含了一系列的软件开发工具&#xff0c;涵盖了从编写代码…

【植物大战僵尸杂交版】获取+存档插件

文章目录 一、还记得《植物大战僵尸》吗&#xff1f;二、在哪下载&#xff0c;怎么安装&#xff1f;三、杂交版如何进行存档功能概述 一、还记得《植物大战僵尸》吗&#xff1f; 最近&#xff0c;一款曾经在15年前风靡一时的经典游戏《植物大战僵尸》似乎迎来了它的"文艺复…

渐开线花键测量学习笔记分享

大家好&#xff0c;继续渐开线花键的相关内容&#xff0c;本期是渐开线花键测量相关的学习笔记分享&#xff1a; 花键检测项目有花键大径和小径检验&#xff1b;内花键齿槽宽和外花键齿厚&#xff0c;以及渐开线终止圆 和起始圆直径检测&#xff1b;齿距累计误差 、齿形误差 、…

排序算法简述(第八jiang)

目录 排序 选择排序 O(n2) 不稳定&#xff1a;48429 归并排序 O(n log n) 稳定 插入排序 O(n2) 堆排序 O(n log n) 希尔排序 O(n log2 n) 图书馆排序 O(n log n) 冒泡排序 O(n2) 优化&#xff1a; 基数排序 O(n k) 快速排序 O(n log n)【分治】 不稳定 桶排序 O(n…

Mysql-常用函数及其用法总结

1、字符串函数 测试用例如下&#xff1a; 1.1 CONCAT() 将多个字符串连接成一个字符串。 SELECT CONCAT(first_name, , last_name) AS full_name FROM users; -- 期望结果&#xff1a;John Doe, Jane Smith, Michael Johnson 1.2 SUBSTRING() 提取子字符串 SELECT SUBSTR…

STM32-PWR和WDG看门狗

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. PWR1.1 PWR简介1.2 电源框图1.3 上电复位和掉电复位1.4 可编程电压监测器1.5 低功耗模式1.6 模式选择1.7 睡眠模式1.8 停止模式1.9 待机模式1.10 库函数 2. WDG看门狗2.1 WDG简介2.2 IWDG框图2.3 IWDG键寄存器2.4 …

13 学习总结:指针 · 其一

目录 一、内存和地址 &#xff08;一&#xff09;内存 &#xff08;二&#xff09;内存单元 &#xff08;三&#xff09;地址 &#xff08;四&#xff09;拓展&#xff1a;CPU与内存的联系 二、指针变量和地址 &#xff08;一&#xff09;创建变量的本质 &#xff08;二…

Ansible常用模块

华子目录 Ansible四个命令模块1.组成2.特点3.区别3.1command、shell模块3.2raw模块 4.command模块4.1参数表4.2free_form参数 5.shell模块5.1作用5.2例如 6.script模块6.1示例 7.raw模块7.1参数7.2示例 文件操作模块1.file模块1.1参数1.2示例 2.copy模块2.1参数 Ansible四个命令…