当前位置：首页 > 科技 > 软件

跨域问题及常用的四种解决方案

来源：责编：时间：2024-05-23 08:34:21 285观看

导读图片前言跨域问题指的是在Web开发中，由于浏览器的同源策略限制，当一个网页尝试访问与它不同源（协议、域名或端口不同）的资源时，可能会遇到安全限制导致无法正常访问的问题。这种策略旨在防止恶意网站读取或修改其他网站的

图片

前言

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

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

跨域问题演示

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

图片

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

1、Web工程结构：

图片

application.properties

spring.application.name=springboot-cross-webserver.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-crossserver.port=8081

测试应用

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

3、启动并测试

图片

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

为什么产生跨域问题？

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

协议不同：如 https和http；
端口不同
域名不同

图片

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

如何解决跨域问题？

从上边的问题来看，主要在于浏览器保护，对参数 "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");        }};    }}

演示结果：

图片

二、使用全局跨域配置

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

三、使用CorsFilter跨域

@Componentpublic class CorsFilter implements Filter {    @Override    public 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

参考文章: https://mp.weixin.qq.com/s/YQr0q4qeZb5p1s-FVEdJvg

本文链接：http://www.28at.com/showinfo-26-90189-0.html跨域问题及常用的四种解决方案

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Redis大Key问题的深入探索与解决方案

下一篇：企业数字化转型 7 大箴言丨 28 字原则揭秘

标签：

热门焦点

K60至尊版刚预热一加Ace2 Pro正面硬刚

Redmi这边刚如火如荼的宣传了K60 Ultra的各种技术和硬件配置，作为竞品的一加也坐不住了。一加中国区总裁李杰发布了两条微博，表示在自家的一加Ace2上早就已经采用了和PixelWo
中兴AX5400Pro+上手体验：再升级双2.5G网口+USB 3.0这次全都有

2021年11月的时候，中兴先后发布了两款路由器产品，中兴AX5400和中兴AX5400 Pro，从产品命名上就不难看出这是隶属于同一系列的，但在外观设计上这两款产品可以说是完全没一点关系
帅气纯真少年！日本最帅初中生选美冠军出炉

日本第一帅哥初一生选美大赛冠军现已正式出炉，冠军是来自千叶县的宗田悠良。日本一直热衷于各种选美大赛，从“最美JK”起到“最美女星&r
JavaScript 混淆及反混淆代码工具

介绍在我们开始学习反混淆之前，我们首先要了解一下代码混淆。如果不了解代码是如何混淆的，我们可能无法成功对代码进行反混淆，尤其是使用自定义混淆器对其进行混淆时。什么是混
让我们一起聊聊文件的操作

文件【1】文件是什么？文件是保存数据的地方，是数据源的一种，比如大家经常使用的word文档、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存数据，它既可以保
消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

来源：征探财经作者：陈香羽随着流量红利的退潮，电商的存量博弈越来越明显。曾经主攻中高端与品质的淘宝天猫、京东重拾“低价”口号。而过去与他们错位竞争的拼多多，靠
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
三星推出Galaxy Tab S9系列平板电脑以及Galaxy Watch6系列智能手表

2023年7月26日，三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。除此之外，Galaxy Tab S9系列平板电脑以及三星Galaxy Watch6系列智能手表也同期
亲历马斯克血洗Twitter，硅谷的苦日子在后头

文/刘哲铭　　编辑/李薇　　马斯克再次挥下裁员大刀。　　美国时间11月14日，Twitter约4400名外包员工遭解雇，此次被解雇的员工的主要工作为内容审核等。此前，T

跨域问题及常用的四种解决方案

前言

跨域问题演示

1、Web工程结构：

3、启动并测试

为什么产生跨域问题？

如何解决跨域问题？

一、使用@CrossOrigin注解

二、使用全局跨域配置

三、使用CorsFilter跨域

四、使用Nginx来实现跨域

总结

K60至尊版刚预热一加Ace2 Pro正面硬刚

中兴AX5400Pro+上手体验：再升级双2.5G网口+USB 3.0这次全都有

帅气纯真少年！日本最帅初中生选美冠军出炉

JavaScript 混淆及反混淆代码工具

让我们一起聊聊文件的操作

消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

ESG的面子与里子

三星推出Galaxy Tab S9系列平板电脑以及Galaxy Watch6系列智能手表

亲历马斯克血洗Twitter，硅谷的苦日子在后头

最新推荐

猜你喜欢

热门推荐

相关资讯