当前位置： 首页 > news >正文

浏览器跨域问题

news 2026/2/9 3:06:31

跨域问题

  • 什么是跨域问题
  • 如何解决跨域问题
    • JSONP
    • CORS方式解决跨域
    • 使用 Nginx 反向代理
    • 使用 WebSocket
  • 跨源请求是否能携带Cookie

什么是跨域问题

  • 跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据.
  • 同源策略是：拥有相同的协议、域名、端口号的网址间才可以相互访问资源。
  • 缺少同源策略，浏览器容易收到XSS、CSRF等攻击。
  • 跨域并不是客户端请求发不出去，而是客户端请求发出去了，服务器也正常返回结果了，但是结果被浏览器拦截了。

跨域的三种情况:

  • 协议不同，如 http 和 https.
  • 域名不同.
  • 端口不同.
    在这里插入图片描述

如何解决跨域问题

JSONP

  • JSONP（JSON with Padding）通过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回调函数后会立马执行，于是就拿到了执行的响应数据。

前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body><h2>验证使用JSONP方式发送跨域请求</h2><div><input type="button" value="发送请求" onclick="ajaxJsonp()"></div>
</body>
<script type="text/javascript">// 前端通过动态创建javascript标签的方式发送请求function ajaxJsonp() {//将回调函数的名称放到这个请求的query参数里var url = "http://localhost:8081/jsonp?callback=jsonpcall"; var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = url;document.body.appendChild(script);}// jsonp返回数据时调用的函数,数据以参数形式传递function jsonpcall(data) {console.log("do response jsonp data");console.log(data);}
</script>
</html>

后端代码

/*** 使用JSONP方式处理跨域GET请求* @param req* @param resp* @param callback 回调函数名称* @return*/
@RequestMapping(value = "/jsonp", method = RequestMethod.GET)
@ResponseBody
public Object testAjaxJsonp(HttpServletRequest req, HttpServletResponse resp,@RequestParam("callback") String callback) {JSONObject json = new JSONObject();json.put("name", "jsonp");json.put("id", "");// 将数据作为函数的参数返回给浏览器,如: jsonpcall({"name":"jsonp","id":""})return new StringBuffer().append(callback).append("(").append(json).append(")");
}

优缺点

  • jsonp的优点就是兼容性好，可以解决主流浏览器的跨域问题，缺点是仅支持GET请求，不安全，可能遭受xss攻击

CORS方式解决跨域

  • cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。
  • 前端浏览器在IE9以上，后端在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。
  • 不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签
resp.setHeader("Access-Control-Allow-Origin", req.getHeader("origin"));
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");

优缺点

  • CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）但IE10以下不支持CORS

使用 Nginx 反向代理

  • 由于同源策略仅存在于浏览器之间，服务器之间的交互不需要遵循同源策略。
  • 所以我们这里可以使用 Nginx 作为 Web 服务器，监听并接收来自外部（其他服务器）请求，将接收到的请求使用和本机相同的域名转发到后端，然后再将响应转发给前端

使用 WebSocket

  • HTML5 定义了 Websocket 协议，该协议主要用于服务器和浏览器之间的持久化连接，并且没有同源策略的限制。
  • 该方法需要后端提供 Websocket 接口，前端进行接收
  • 但如果仅仅是为了实现跨域，不推荐使用 Websocket。

跨源请求是否能携带Cookie

  • 默认情况下是跨域是不会携带cookie的，例如：a.com 网站请求 b.com 的接口，这个时候不会把a.com这个域名下的 cookie 携带上。如果需要携带，则需要做一下配置

前端配置

  • XMLHttpRequest发请求需要设置 withCredentials=true
  • fetch 发请求需要设置 credentials = include

服务器端配置

  • Access-Control-Allow-Credentials: true

相关文章：

浏览器跨域问题

跨域问题什么是跨域问题如何解决跨域问题JSONPCORS方式解决跨域使用 Nginx 反向代理使用 WebSocket跨源请求是否能携带Cookie什么是跨域问题 跨域问题指的是不同站点之间&#xff0c;使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制&#xff0c;它的初衷是为…...

编程日记 2023/2/23 7:25:14

面向对象的三特性

继承Java中通过继承&#xff0c;子类可以获取父类的属性和方法&#xff0c;不需要自己去定义即可获取&#xff0c;可以提高代码的复用性&#xff1b;同时&#xff0c;子类如果对继承的方法不满意&#xff0c;可以自己重写方法&#xff0c;进行个性化定制。好处&#xff1a;提高…...

编程日记 2023/2/23 7:24:08

管理者如何给员工沟通绩效

目录 1.沟通基础 2.聊绩效第一部分&#xff0c;心理预期管理 3.聊绩效第二部分&#xff0c;分人沟通 3.1 高绩效者 3.2 中绩效者 3.3 低绩效者 4.注意 1.沟通基础 无论在哪里工作&#xff0c;每个员工都不免会遇到绩效沟通的事情。作为管理层&#xff0c;通过每年的绩效…...

编程日记 2023/2/23 7:22:58

使用Python启动appium

import osimport subprocessimport multiprocessingimport timeimport pytestfrom appium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom time import sleep# 关于appium的启动# 1、桌面版&#xff08;咱们现在用的&#xff09;&#xff1a;…...

编程日记 2023/2/23 7:21:51

活动回顾丨研发效能度量线下沙龙圆满举办

2月18日&#xff0c;由跬智信息&#xff08;Kyligence&#xff09;联合甄知科技主办的研发效能度量线下沙龙圆满举办。本次沙龙在 Kyligence 上海总部举办&#xff0c;Kyligence 联合创始人兼 CTO 李扬、腾讯 Tech Lead 茹炳晟&#xff0c;以及甄知科技创始人兼 CTO 张礼军在现…...

编程日记 2023/2/23 7:20:43

问题解决篇 | Win11网络连接上了但是无法上网（修改DNS弹出框框“出现问题”，如何通过网络检测确定并修复网络问题）

目录 问题 网络诊断 Win i 打开设置 搜索“查找并修复网络问题”并点击 "远程计算机或设备将不接受连接" 解决办法&#xff1a; Win R&#xff0c;输入 inetcpl.cpl &#xff0c;点击确定&#xff0c;打开Internet选项 选择“连接” 点击“局域网设置” 三个…...

编程日记 2023/2/23 7:19:36

Go语言进阶与依赖管理-学习笔记

1 语言进阶 1.1 Goroutine 线程&#xff1a;内核态&#xff0c;栈MB级别 协程&#xff1a;用户态&#xff0c;轻量级线程&#xff0c;栈KB级 1.2 CSP 提倡通信实现共享内存 1.3 Channel 创建方法 make(chan 元素类型&#xff0c;缓冲区大小&#xff09; 无缓冲通道&#x…...

编程日记 2023/2/23 7:18:25

【Mybatis源码分析】datasource配置${}表达式时是如何被解析的？

核心配置中${}表达式配置的解析一、核心配置主体二、核心配置文件中properties是如何被解析的&#xff1f;三、${} 表达式的解析四、总结前提&#xff1a; 核心配置文件是被XMLConfigBuilder 对象进行解析的&#xff0c;configuration 对象是由它父类BaseBuider继承下来的属性…...

编程日记 2023/2/23 7:17:18

网络基础概述

1.计算机网络背景 ​ 计算机刚刚发展的时候&#xff0c;是没有网络的&#xff0c;每一台计算机都是相互独立的。后来&#xff0c;人们有了多人协作的需求&#xff0c;人们就想办法把多台计算机用“线”连接起来&#xff0c;实现数据共享。后来&#xff0c;连接到一起的电脑越来…...

编程日记 2023/2/23 7:16:10

微搭使用笔记(四) 通过循环展示组件+json配置生成表单及数据获取

背景及整体思路 上篇文章我们通过微搭提供的数据模型完成了问卷表单页面的创建和数据采集&#xff0c;相对来说除了数据模型配置略显复杂外其他的倒还算方便。 本文我们通过for循环加上json文件配置的方式实现一个通用表单页面&#xff0c;如果更换了表单只需要替换掉json配置…...

编程日记 2023/2/23 6:54:33

做测试5年，靠业务熟悉吃老本，技术短板暴露，30岁被无情辞退...

朋友跟我诉苦&#xff0c;最近他被公司无情辞退了。测试几年&#xff0c;月薪10k&#xff0c;如今已经30了&#xff0c;接下来不知道该怎么办&#xff0c;让我帮他想想办法... 几年下来&#xff0c;也算是公司的骨干成员&#xff0c;不说有功&#xff0c;但一定无过。公司业务…...

编程日记 2023/2/23 6:53:27

Linux系统安装MySQL8.0版本详细教程【亲测有效】

首先官网下载安装包&#xff1a;https://downloads.mysql.com/archives/community/ 一、上传到安装服务器 二、解压 tar -xvf mysql-8.0.31-linux-glibc2.12-x86_64.tar.xz三、移动位置并重新命名 mv mysql-8.0.31-linux-glibc2.12-x86_64 /usr/local/mysql四、创建mysql用户…...

编程日记 2023/2/23 6:52:19

[论文阅读笔记19]SiamMOT: Siamese Multi-Object Tracking

这是CVPR2021的一篇文章, 是利用SOT的一些思想来进行MOT的运动估计. 文章地址: 文章 代码地址: 代码 0. 摘要 本文提出了一个孪生(Siamese)式的MOT网络, 该网络用来估计帧间目标的运动. 为了探究运动估计对多目标跟踪的影响, 本文提出了两种运动建模方式: 显式和隐式. 本文在…...

编程日记 2023/2/23 6:48:31

unix高级编程-fork和execve

fork和vfork vfork是老的实现方法又很多问题 vfork #include <sys/types.h> #include <unistd.h> #include <stdlib.h> #include <stdio.h> #include <string.h> #include <signal.h> #include <errno.h> #include <sys/stat.…...

编程日记 2023/2/23 6:47:25

Vue3+Ts+Vite开发插件并发布到npm

依赖版本信息如下&#xff1a; "vue": "^3.2.45""typescript": "~4.7.4""vite": "^4.0.0""less": "^4.1.3""terser": "^5.16.4"npm: 8.1.0node: 16.13.0 目标&#xf…...

编程日记 2023/2/23 6:46:17

CAN TP层函数介绍

如果想使用CAN TP层函数，首先需要在网络节点或测试节点配置页面的Componets组件一栏添加osek_tp.dll文件。路径为：C:\Program Files\Vector CANoe 15\Exec32 至于节点的CAPL程序内需不需要引用这个dll文件，无所谓，可写可不写。但是如果是其他dll，必须在CAPL程序中引用。为…...

编程日记 2023/2/23 6:45:05

Spring架构篇--2.5 远程通信基础Select 源码篇--window--Select.open()

前言&#xff1a;在Socket通信中使用Select 来对NIO 进行实现&#xff0c;那么它们的实现方式是怎样的呢&#xff0c;本文从 Selector.open() 进行第一步的分析&#xff1b; Selector.open() &#xff1a; Selector 类&#xff1a; public static Selector open() throws IOEx…...

编程日记 2023/2/23 6:43:58

WEB静态交互展示【数据mock】

文章目录背景需求分析实现过程1.爬取原有项目数据2.将数据引入项目3.打包收工后记背景 接到公司一个【离谱】的需求&#xff0c;要求把已有的项目做一个演示版本&#xff08;静态文件版本&#xff09;&#xff1b;本人觉得前端、后端搞个容器包&#xff0c;一个演示版本不就有…...

编程日记 2023/2/23 6:42:50

(4)C#传智:分支Switch与循环While(第四天)

一、异常捕获 定义&#xff1a;语法无错&#xff0c;程序因某些原因出现的错误&#xff0c;而不能正常运行。 用try-catch进行捕获。哪行代码可能出现异常&#xff0c;你就踹它一脚。 try { 可能会出现异常的代码; ---- …...

编程日记 2023/2/23 6:41:45

Stable-Baselines 3 部分源代码解读 2 on_policy_algorithm.py

Stable-Baselines 3 部分源代码解读 ./common/on_policy_algorithm.py 前言 阅读PPO相关的源码&#xff0c;了解一下标准库是如何建立PPO算法以及各种tricks的&#xff0c;以便于自己的复现。 在Pycharm里面一直跳转&#xff0c;可以看到PPO类是最终继承于基类&#xff0c;也…...

编程日记 2023/2/23 6:40:37

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/9/27 0:41:04