浏览器跨域问题
跨域问题
- 什么是跨域问题
- 如何解决跨域问题
- 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什么是跨域问题 跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为…...
面向对象的三特性
继承Java中通过继承，子类可以获取父类的属性和方法，不需要自己去定义即可获取，可以提高代码的复用性；同时，子类如果对继承的方法不满意，可以自己重写方法，进行个性化定制。好处：提高…...
管理者如何给员工沟通绩效
目录 1.沟通基础 2.聊绩效第一部分，心理预期管理 3.聊绩效第二部分，分人沟通 3.1 高绩效者 3.2 中绩效者 3.3 低绩效者 4.注意 1.沟通基础 无论在哪里工作，每个员工都不免会遇到绩效沟通的事情。作为管理层，通过每年的绩效…...
使用Python启动appium
import osimport subprocessimport multiprocessingimport timeimport pytestfrom appium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom time import sleep# 关于appium的启动# 1、桌面版（咱们现在用的）：…...
活动回顾丨研发效能度量线下沙龙圆满举办
2月18日，由跬智信息（Kyligence）联合甄知科技主办的研发效能度量线下沙龙圆满举办。本次沙龙在 Kyligence 上海总部举办，Kyligence 联合创始人兼 CTO 李扬、腾讯 Tech Lead 茹炳晟，以及甄知科技创始人兼 CTO 张礼军在现…...
问题解决篇 | Win11网络连接上了但是无法上网（修改DNS弹出框框“出现问题”，如何通过网络检测确定并修复网络问题）
目录 问题 网络诊断 Win i 打开设置 搜索“查找并修复网络问题”并点击 "远程计算机或设备将不接受连接" 解决办法： Win R，输入 inetcpl.cpl ，点击确定，打开Internet选项 选择“连接” 点击“局域网设置” 三个…...
Go语言进阶与依赖管理-学习笔记
1 语言进阶 1.1 Goroutine 线程：内核态，栈MB级别 协程：用户态，轻量级线程，栈KB级 1.2 CSP 提倡通信实现共享内存 1.3 Channel 创建方法 make(chan 元素类型，缓冲区大小） 无缓冲通道&#x…...
【Mybatis源码分析】datasource配置${}表达式时是如何被解析的？
核心配置中${}表达式配置的解析一、核心配置主体二、核心配置文件中properties是如何被解析的？三、${} 表达式的解析四、总结前提： 核心配置文件是被XMLConfigBuilder 对象进行解析的，configuration 对象是由它父类BaseBuider继承下来的属性…...
网络基础概述
1.计算机网络背景 计算机刚刚发展的时候，是没有网络的，每一台计算机都是相互独立的。后来，人们有了多人协作的需求，人们就想办法把多台计算机用“线”连接起来，实现数据共享。后来，连接到一起的电脑越来…...
微搭使用笔记(四) 通过循环展示组件+json配置生成表单及数据获取
背景及整体思路 上篇文章我们通过微搭提供的数据模型完成了问卷表单页面的创建和数据采集，相对来说除了数据模型配置略显复杂外其他的倒还算方便。 本文我们通过for循环加上json文件配置的方式实现一个通用表单页面，如果更换了表单只需要替换掉json配置…...
做测试5年，靠业务熟悉吃老本，技术短板暴露，30岁被无情辞退...
朋友跟我诉苦，最近他被公司无情辞退了。测试几年，月薪10k，如今已经30了，接下来不知道该怎么办，让我帮他想想办法... 几年下来，也算是公司的骨干成员，不说有功，但一定无过。公司业务…...
Linux系统安装MySQL8.0版本详细教程【亲测有效】
首先官网下载安装包：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用户…...
[论文阅读笔记19]SiamMOT: Siamese Multi-Object Tracking
这是CVPR2021的一篇文章, 是利用SOT的一些思想来进行MOT的运动估计. 文章地址: 文章 代码地址: 代码 0. 摘要 本文提出了一个孪生(Siamese)式的MOT网络, 该网络用来估计帧间目标的运动. 为了探究运动估计对多目标跟踪的影响, 本文提出了两种运动建模方式: 显式和隐式. 本文在…...
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.…...
Vue3+Ts+Vite开发插件并发布到npm
依赖版本信息如下： "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 目标…...
CAN TP层函数介绍
如果想使用CAN TP层函数，首先需要在网络节点或测试节点配置页面的Componets组件一栏添加osek_tp.dll文件。路径为：C:\Program Files\Vector CANoe 15\Exec32 至于节点的CAPL程序内需不需要引用这个dll文件，无所谓，可写可不写。但是如果是其他dll，必须在CAPL程序中引用。为…...
)
Spring架构篇--2.5 远程通信基础Select 源码篇--window--Select.open()
前言：在Socket通信中使用Select 来对NIO 进行实现，那么它们的实现方式是怎样的呢，本文从 Selector.open() 进行第一步的分析； Selector.open() ： Selector 类： public static Selector open() throws IOEx…...
WEB静态交互展示【数据mock】
文章目录背景需求分析实现过程1.爬取原有项目数据2.将数据引入项目3.打包收工后记背景 接到公司一个【离谱】的需求，要求把已有的项目做一个演示版本（静态文件版本）；本人觉得前端、后端搞个容器包，一个演示版本不就有…...
C#传智:分支Switch与循环While(第四天))
(4)C#传智:分支Switch与循环While(第四天)
一、异常捕获 定义：语法无错，程序因某些原因出现的错误，而不能正常运行。 用try-catch进行捕获。哪行代码可能出现异常，你就踹它一脚。 try { 可能会出现异常的代码; ---- …...
Stable-Baselines 3 部分源代码解读 2 on_policy_algorithm.py
Stable-Baselines 3 部分源代码解读 ./common/on_policy_algorithm.py 前言 阅读PPO相关的源码，了解一下标准库是如何建立PPO算法以及各种tricks的，以便于自己的复现。 在Pycharm里面一直跳转，可以看到PPO类是最终继承于基类，也…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...