跨域问题的4种解决方案

文章导读

图片

前言

  跨域问题指的是在Web开发中,由于浏览器的同源策略限制,当一个网页尝试访问与它不同源(协议、域名或端口不同)的资源时,可能会遇到安全限制导致无法正常访问的问题。这种策略旨在防止恶意网站读取或修改其他网站的数据,保护用户信息安全。

这样说可能有点抽象,下面具体展开说明。

跨域问题演示

  通常情况下,我们主流的开发模式是:前后端分离。当我们从浏览器80访问服务端81应用

图片

下面我们用一个Web工程,一个后端工程具体简单演示下。

1、Web工程结构:

图片

  • application.properties

spring.application.name=springboot-cross-web
server.port=8080
  • index.html 页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试跨域请求页面</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div><input type="button" onclick="crossSubmit()" value="跨域测试">
</div>
<script>function crossSubmit() {// 发送跨域请求jQuery.ajax({url: "http://localhost:8081/api/cross",type: "POST",data: {"key": "Cross"},success: function (result) {alert("返回数据:" + result.data);}});}
</script>
</body>
</html>

2、后端工程结构:

图片

  • application.properties

spring.application.name=springboot-cross
server.port=8081
  • 测试应用

@RestController
public class CrossAppController {@RequestMapping("/api/cross")public HashMap<String, Object> crossTest() {return new HashMap<String, Object>() {{put("state", 200);put("data", "success");}};}
}

3、启动并测试

图片

浏览器报错产生跨域问题。

为什么产生跨域问题?

一般来讲,通常产生跨域问题有以下几种原因:

  1. 协议不同:如 https和http;

  2. 端口不同

  3. 域名不同

图片

这就是常说的同源策略的问题。产生跨域问题的根源就是请求不同源。

如何解决跨域问题?

从上边的问题来看,主要在于浏览器保护,对参数 "Access-Control-Allow-Origin"的设置。

主要有下解决方案:

一、使用@CrossOrigin注解

@RestController
@CrossOrigin(origins = "*")
public class CrossAppController {@RequestMapping("/api/cross")public HashMap<String, Object> crossTest() {return new HashMap<String, Object>() {{put("state", 200);put("data", "success");}};}
}

演示结果:

图片

二、使用全局跨域配置

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/cross").allowedOrigins("*").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*");//.allowCredentials(true);}
}

三、使用CorsFilter跨域

@Component
public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;HttpServletRequest request = (HttpServletRequest) req;// 设置允许的来源response.setHeader("Access-Control-Allow-Origin", "*");// 处理预检请求if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {response.setStatus(HttpServletResponse.SC_OK);} else {chain.doFilter(req, res);}}
}

四、使用Nginx来实现跨域

server {  listen 80;  server_name your.domain.com;  location / {  # 添加CORS相关的响应头  add_header 'Access-Control-Allow-Origin' '*';  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';  # 对于OPTIONS请求,直接返回204状态码  if ($request_method = 'OPTIONS') {  return 204;  }  # 其他配置...  # 代理到后端服务或其他配置...  # proxy_pass http://your_backend/;  # 其他proxy_...指令...  }  
}

总结

  • 跨域问题指的是在Web开发中,由于浏览器的同源策略限制,导致无法正常访问的问题。

  • 主要原理就是请求参数Access-Control-Allow-Origin

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

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

相关文章

yarn的基本命令和用法

Yarn通过并行安装、离线模式、确定性安装以及更好的依赖解析算法&#xff0c;为开发者提供了更快、更稳定、更安全的包管理体验。它保留了npm的大部分功能&#xff0c;并在此基础上做了大量优化&#xff0c;下面我们就来详述Yarn的核心命令和实用技巧。&#x1f4da; 安装Yarn…

【MySQL精通之路】InnoDB(7)-锁和事务模型(2)-事务模型

主博客&#xff1a; 【MySQL精通之路】InnoDB(7)-锁和事务模型-CSDN博客 上一篇&#xff1a; 【MySQL精通之路】InnoDB(7)-锁和事务模型(1)-锁-CSDN博客 下一篇&#xff1a; 目录 1.事务隔离级别 2.1 可重复读 2.2 读已提交 2.3 读取未提交 2.4 序列化读 2.自动提交、…

订餐系统总结、

应用层&#xff1a; SpringBoot:快速构建Spring项目&#xff0c;采用“约定大于配置”的思想&#xff0c;简化Spring项目的配置开发。 SpringMvc&#xff1a;Spring框架的一个模块&#xff0c;springmvc和spring无需通过中间整合层进行整合&#xff0c;可以无缝集成。 Sprin…

完整的数据可视化方法集

在当前的大数据时代&#xff0c;了解如何可视化数据是UI/UX设计师技能的重要组成部分。如今&#xff0c;几乎所有的公司都需要良好的数据可视化作为确定业务方向和决策的参考。数据的可视化结果越好&#xff0c;用户的决策就越科学。 1、什么是数据可视化 数据可视化是将信息…

张量 t-product 积(matlab代码)

参考文献&#xff1a;Tensor Robust Principal Component Analysis with a New Tensor Nuclear Norm 首先是文章2.3节中 t-product 的定义&#xff1a; 块循环矩阵&#xff1a; 参考知乎博主的例子及代码&#xff1a;&#xff08;t-product与t-QR分解&#xff0c;另一篇傅里叶对…

HTML5 设备访问及输入输出设备交互

目录 设备访问输入设备交互输出设备交互设备访问 设备信息访问 navigator.userAgent:获取浏览器的用户代理字符串,从中可以解析出设备类型、操作系统、浏览器版本等信息。 const userAgent = navigator.userAgent; console.log(userAgent); // 输出类似 "Mozilla/5.0…

算法(Algorithm)

算法&#xff08;Algorithm&#xff09;是指解题方案的准确而完整的描述&#xff0c;是一系列解决问题的清晰指令&#xff0c;代表着用系统的方法描述解决问题的策略机制。也就是说&#xff0c;算法能够对一定规范的输入&#xff0c;在有限时间内获得所要求的输出。算法应该具有…

【python004】miniforge可行替代方案实战总结(最近更新中)

1.熟悉、梳理、总结项目研发实战中的miniforge日常使用中的问题。随着版本更新&#xff0c;做了一些变动&#xff0c;如商业化限制&#xff0c;取消一些语法等。 2.欢迎点赞、关注、批评、指正&#xff0c;互三走起来&#xff0c;小手动起来&#xff01;

vue通过for循环生成input框后双向绑定失效问题

有些时候页面上有太多的表单元素&#xff0c;一个个的写太过繁琐&#xff0c;拿 input 框举例&#xff0c;众多的 input 框&#xff0c;无非就是输入框前的说明和 input 框的 name 属性不一样 <el-form :inline"true" :model"formInline" size"mi…

01-05.Vue自定义过滤器

目录 前言过滤器的概念过滤器的基本使用给过滤器添加多个参数 前言 我们接着上一篇文章01-04.Vue的使用示例&#xff1a;列表功能 来讲。 下一篇文章 02-Vue实例的生命周期函数 过滤器的概念 概念&#xff1a;Vue.js 允许我们自定义过滤器&#xff0c;可被用作一些常见的文本…

软件模块的耦合

软件模块的耦合 耦合是指软件模块之间的依赖程度&#xff0c;耦合越低&#xff0c;模块之间的独立性越高&#xff0c;软件的可维护性、可重用性也越高。下面是几种常见的耦合类型的概念&#xff1a; 数据耦合&#xff08;Data Coupling&#xff09;&#xff1a; 当一个模块通…

Python ❀ 使用代码解决今天中午吃什么的重大生存问题

1. 环境安装 安装Python代码环境参考文档 2. 代码块 import random# 准备一下你想吃的东西 hot ["兰州拉面", "爆肚面", "黄焖鸡", "麻辣香锅", "米线", "麻食", "羊肉泡馍", "肚丝/羊血汤&qu…

doxygen 1.11.0 使用详解(九)——包含公式

目录 Doxygen allows you to put LATEX formulas in the output (this works only for the HTML, LATEX and RTF output. To be able to include formulas (as images) in the HTML and RTF documentation, you will also need to have the following tools installed latex: …

定时监测服务器磁盘是否超过阈值,超过就删除docker 镜像

达到指定百分比 删除镜像脚本 df -h 查找到 内存占用信息 &#xff0c;得到的 文件系统名称是 overlay的&#xff0c;Use% 达到70就进行删除docker 镜像 #!/bin/bash# 设置磁盘使用阈值 THRESHOLD70# 获取 overlay 文件系统的磁盘使用百分比 DISK_USAGES$(df -h | grep overl…

利用sentence bert 实现语义向量搜索

目录 基于pytorch的中文语言模型预训练:https://github.com/zhusleep/pytorch_chinese_lm_pretrain/tree/master sentence_emb.py search_faiss_robert768.py faiss_index.py gen_vec_save2_faiss.py 基于pytorch的中文语言模型预训练:https://github.com/zhusleep/pytorch_…

[协议]stm32读取AHT20程序示例

AHT20温度传感器使用程序&#xff1a; 使用i2c读取温度传感器数据很简单&#xff0c;但市面上有至少两个手册&#xff0c;我这个对应的手册贴出来&#xff1a; main: #include "stm32f10x.h" // Device header #include <stdint.h> #includ…

数智赋能内涝治理,四信城市排水防涝解决方案保障城市安全运行

由强降雨、台风造成城市低洼处出现大量积水、内涝的情况时有发生&#xff0c;给人们出行带来了极大不便和安全隐患&#xff0c;甚至危及群众生命财产安全。 为降低内涝造成的损失&#xff0c;一方面我们要大力加强城市排水基础设施的建设&#xff1b;另一方面要全面掌握城市内涝…

U-Boot menu菜单分析

文章目录 前言目标环境背景U-Boot如何自动调起菜单U-Boot添加自定义命令实践 前言 在某个厂家的开发板中&#xff0c;在进入它的U-Boot后&#xff0c;会自动弹出一个菜单页面&#xff0c;输入对应的选项就会执行对应的功能。如SD卡镜像更新、显示设置等&#xff1a; 目标 本…

docker命令详解大全

Docker是一种流行的容器化平台&#xff0c;用于快速部署应用程序并管理容器的生命周期。以下是一些常用的Docker命令及其用途的概述&#xff1a; docker run&#xff1a;创建一个新容器并运行一个命令。docker ps&#xff1a;列出当前运行的容器。docker stop&#xff1a;停止…

Unity射击游戏开发教程:(20)增加护盾强度

在本文中,我们将增强护盾,使其在受到超过 1 次攻击后才会被禁用。 Player 脚本具有 Shield PowerUp 方法,我们需要调整盾牌在被摧毁之前可以承受的数量,因此我们将声明一个 int 变量来设置盾牌可以承受的击中数量。