java解决跨域问题

news2024/9/23 17:24:58

浏览器js在访问服务器中的资源时,会出现同一页面或者不同域名(协议,IP,端口)不可访问
例如:file://d://test.html页面(file协议)中通过ajax访问服务器api.test.com的接口(http协议),由于协议不同,此时会出现浏览器访问不了后台接口的问题
此时需要在服务器接口的请求头配置好,当浏览器访问时就会根据请求头判断是否可以访问

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跨域请求示例</title>
</head>
<body>
    <button onclick="sendRequest()">发送请求</button>
    <div id="result"></div>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8888/user/queryById?id=1', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('result').innerText = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

调用后台接口时报错

补充跨域过滤

package com.example.demo.config;

import org.springframework.stereotype.Component;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@Component
public 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", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin,X-Requested-With,Content-type,Accept,Access-Token");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(request, response);
    }
}

再次请求,可以正常得到结果

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

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

相关文章

基于数据沙箱与LLM用例自愈的UI自动化测试平台

本期作者 项目参与人员&#xff1a; 顾伊凡、陈钰广、张又中、杨雨浩、樊执政、熊梦园、何璇、谭楠 UI自动化测试能够在一定程度上确保产品质量&#xff0c;尤其在降本提效的大背景下&#xff0c;其重要性愈发凸显。理想情况下&#xff0c;UI自动化测试不仅能够能帮我们规避不少…

低功率接地故障断路器(GFI)控制芯片D4147描述

D4147主要用于三线制GFCI输出接口、GFCI芯片断路器、便携式GFCI线路等领域的产品&#xff0c;侦测并防护火线对地故障和零线对负载短路故障。 功能介绍 D4147 为低功率接地故障断路器&#xff08;GFI&#xff09;控制器芯片&#xff0c;用于检测危险的接地故障电流路径以及接地…

基于nodejs+vue文学创作的社交论坛python-flask-django-php

课题主要采用nodejs技术和MySQL数据库技术以及express框架进行开发。系统主要包括个人中心、用户管理、文章类型管理、文章信息管理、文章举报管理、警告信息管理、系统管理等功能&#xff0c;从而实现智能化的社交论坛管理方式&#xff0c;提高社交论坛管理的效率。 前端技术&…

利用Python和IP技术实现智能旅游情报系统

文章目录 引言一、系统架构设计1. 数据采集模块2. 数据处理模块3. 用户界面模块 二、数据获取技术应用三、系统功能展示四、亮数据采集工具介绍五、总结六、号外 引言 随着旅游行业的不断发展&#xff0c;人们对旅游信息的需求也越来越大。为了帮助旅行者更好地规划行程&#…

Springboot:Actuator监控

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、Actuator介绍 二、集成步骤 三、重要端点介绍 1、/actuator 2、/actuator/env 3、/actuator/heapdump 4、/actuator/metrics 5、/actuator/shutdown 6、/l…

通过MobaXterm工具可视化服务器桌面

一、MobaXterm工具 MobaXterm是一款功能强大的远程连接工具&#xff0c;可以连接到各种类型的服务器&#xff0c;包括Linux、Windows和MacOS。支持多种协议&#xff0c;包括SSH、RDP、VNC和Telnet MobaXterm可以通过X11转发功能可视化服务器桌面。 二、MobaXterm工具可视化服务…

CSS中使用伪类:before来实现在标签右上角添加“推荐”等字样的斜三角样式

在HTML中添加标签并赋上类名“.recommend”即可&#xff0c;如下所示&#xff1a; <span class"recommend"></span>css中 .recommend:before {content: "推荐"; position: absolute; top: -8px; right: -26px; z-index: 1; padding: 14px 22…

【嵌入式学习】Qtday03.26

一、思维导图 二、练习 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_login_btn_clicked() {if(ui->…

STM32CubeIDE基础学习-USART串口通信实验(轮询方式)

STM32CubeIDE基础学习-USART串口通信实验&#xff08;轮询方式&#xff09; 文章目录 STM32CubeIDE基础学习-USART串口通信实验&#xff08;轮询方式&#xff09;前言第1章 硬件介绍第2章 工程配置2.1 工程外设配置部分2.2 生成工程代码部分 第3章 代码编写3.1 串口发送3.1.1 发…

KIOXIA铠侠CM7系列E3.S双端口NVMe2.0 PCIe5.0 SSD KCM71RJE7T68

KIOXIA 铠侠推出的CM7-R E3.S企业级NVMe读密集型企业级固态硬盘&#xff0c;采用PCIe 5.0和NVMe 2.0技术&#xff0c;性能出色&#xff0c;最高可达2,700K IOPS&#xff08;随机读取&#xff09;和310K IOPS&#xff08;随机写入&#xff09;1 DWPD的耐用性和高达15.36 TB的存储…

xmes前端问题,给form表单赋值后,再次从表单拿不到该值

xmes前端&#xff0c;给form表单赋值后&#xff0c;再次从表单拿不到该值&#xff0c;但页面可以展示 赋值 this.$[frm-main].$$([namefilm_num]).value filmNum ; 获取表单的值&#xff0c;这里拿不到之前赋的值 const reqData this.$[frm-main].serializeMyForm(); 原因&…

基于tcp协议的网络通信(将服务端守护进程化)

目录 守护进程化 引入 介绍 如何实现 思路 接口 -- setsid 注意点 实现代码 daemon.hpp log.hpp 运行情况 前情提要 -- 前后台任务介绍(区别命令),sessionsid介绍,session退出后的情况(nuhup,终端进程控制组),任务进程组概念,任务与进程组的关系,-bash介绍-CSDN博客…

深入了解服务器硬件:从基础知识到实际应用

在当今数字化的社会中&#xff0c;服务器扮演着至关重要的角色&#xff0c;它们是支撑互联网、云计算、大数据等技术发展的基石。而理解服务器硬件的基础知识对于从事IT领域的人员来说至关重要。本文将从服务器硬件的基础知识出发&#xff0c;介绍服务器硬件的组成、作用及其在…

Rust使用feature特性和条件编译,以及常用feature使用说明

Cargo Feature 是非常强大的机制&#xff0c;可以为大家提供条件编译和可选依赖的高级特性&#xff0c;可以为你省下不少的代码量来判断操作系统和条件编译等功能。rust官方条件编译文档&#xff1a;Conditional compilation - The Rust Reference features特性 Featuure 可以…

基于nodejs+vue电子产品销售系统设计与实现python-flask-django-php

该系统采用了nodejs技术、express框架&#xff0c;连接MySQL数据库&#xff0c;具有较高的信息传输速率与较强的数据处理能力。包含管理员和用户两个层级的用户角色&#xff0c;系统管理员可以对个人中心、用户管理、产品类别管理、电子产品管理、留言板管理、系统管理、订单管…

【开发篇】七、mybatis的foreach遍历,SQL拼接导致内存溢出

文章目录 1、背景2、快照文件分析3、本地环境复现4、结论5、解决方式 1、背景 文章微服务升级&#xff0c;新增了一个传入文章id的List&#xff0c;判断有多少id是存在的接口&#xff0c;第二天高峰期内存溢出。 2、快照文件分析 打开直方图&#xff0c;发现线程对象占用排第…

11.测试教程-自动化测试selenium-3

文章目录 1.unittest框架解析2.批量执行脚本2.1构建测试套件2.2用例的执行顺序2.3忽略用例执行 3.unittest断言4.HTML报告生成5.异常捕捉与错误截图6.数据驱动 大家好&#xff0c;我是晓星航。今天为大家带来的是 自动化测试selenium第三节 相关的讲解&#xff01;&#x1f600…

强!不用写一行代码!Python最强自动化神器!

1、Playwright介绍 Playwright是一个由Microsoft开发的开源自动化测试工具&#xff0c;它可以用于测试Web应用程序。Playwright支持多种浏览器&#xff0c;包括Chrome、Firefox和WebKit&#xff0c;同时也支持多种编程语言&#xff0c;如JavaScript、TypeScript、Python和C#。…

2014年认证杯SPSSPRO杯数学建模B题(第一阶段)位图的处理算法全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现&#xff1a; 图形&#xff08;或图像&#xff09;在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形&#xff0c;位图则使用像素来描述图像。一般来说&#…

【Chrome控制台】application的使用

首先打开调试面板「windows:F12&#xff1b;mac&#xff1a;commandoptioni」&#xff0c;找到Application选项卡。 如下两区域与pwa相关&#xff0c;也就是渐进式web应用程序。 使用前端数据库如websql或IndexDB&#xff0c;可以在如下选项中查看。 数据库详情要到Storage中…