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

前端跨域2

news 2025/7/8 21:27:45

前端跨域2

前端跨域解决方案（11种方案）

1.JSONP跨域解决方案的底层原理

script、img、link、iframe...

 <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>// 这个就是因为script标签没有跨域限制，所以才能成功请求加载。

react中子组件想要修改父组件中的状态，也是传递一个回调函数给父组件，这个思想和JSONP的思想是一致的。

  • JSONP需要服务器的支持
  • 问题：JSONP只能处理GET请求？（放在？后面不安全，服务器返回的数据只在浏览器会直接执行，如果是木马修改？也会直接执行，不安全）

举例：
html页面： 1.jsonp.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
</head><body><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script src="./1.jsonp.js"></script>
</body></html>

1.jsonp.js

$.ajax({url: 'http://127.0.0.1:8001/list',method: 'get',dataType: 'jsonp', //=>执行的是JSONP的请求,这是jquery封装的ajax的功能success: res => {console.log(res);}
});

服务端配合：serverJSONP.js:

let express = require('express'),app = express();
app.listen(8001, _ => { // 监听8001端口console.log('OK!');
});
app.get('/list', (req, res) => {let {callback = Function.prototype // callback如果没有，默认为空的函数} = req.query;let data = {code: 0,message: '返回jsonp请求的结果'};res.send(`${callback}(${JSON.stringify(data)})`); //=>后端需要处理好这样的数据格式
});

2. CORS跨域资源共享

客户端正常发送请求，服务端设置相应的头信息。

  • 客户端（发送ajax/fetch请求）
axios.defaults.baseURL = 'http://127.0.0.1:8888';
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = function (data) {if (!data) return data;let result = ``;for (let attr in data) {if (!data.hasOwnProperty(attr)) break;result += `&${attr}=${data[attr]}`;}return result.substring(1);
};
axios.interceptors.response.use(function onFulfilled(response) {return response.data;
}, function onRejected(reason) {return Promise.reject(reason);
});
axios.defaults.validateStatus = function (status) {return /^(2|3)\d{2}$/.test(status);
}
  • 服务器设置相应的头信息（需要处理options试探性请求）
app.use((req, res, next) => {res.header("Access-Control-Allow-Origin", "http://localhost:8000"); // http://localhost:8000是允许跨域请求的地址，如果允许很多地址跨域请求，设置为"*"//=>*（就不能在允许携带cookie了） 具体地址res.header("Access-Control-Allow-Credentials", true);res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization, Accept,X-Requested-With");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,HEAD,OPTIONS");if (req.method === 'OPTIONS') {res.send('OK!');return;}next();
});

3.基于http proxy实现跨域请求

http proxy => webpack webpack-dev-server
修改：webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'production',entry: './src/index.js',output: {filename: 'bundle.min.js',path: path.resolve(__dirname, 'build')},devServer: {port: 3000,progress: true,contentBase: './build',proxy: { // => 以'/'开始的请求，就把请求路径转到 target'/': {target: 'http://127.0.0.1:3001',changeOrigin: true // => 允许跨域}}},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
};

4. 基于post message实现跨域处理

postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
https://developer.mozilla.org…
A页面

<iframe src="http://www.github.com/B.html"></iframe>
<script>let iframe = document.querySelector('iframe');// onload 事件会在页面或图像加载完成后立即发生, iframe 中的onload事件会在整个文档加载完成后执行。iframe.onload = function () {iframe.contentWindow.postMessage('github', 'http://www.github.com/');// 'http://www.github.com/' 接受 'github' 参数}window.onmessage = function (ev) {console.log(ev.data);}
</script>

B 页面

// 接收方监听message事件
window.onmessage = function (ev) {console.log(ev.data);ev.source.postMessage(ev.data+'@@', ev.origin);
}

** 5. nginx反向代理 => 不需要前端做什么

www.github.cn -> www.github.com

#proxy服务器
server {listen       80;server_name  www.github.com;location / {proxy_pass   www.github.cn; #反向代理proxy_cookie_demo www.github.cn www.github.com;add_header Access-Control-Allow-Origin www.github.cn;add_header Access-Control-Allow-Credentials true;}
}

** 6. 基于 iframe 的跨域解决方案**

三种：window.name / document.domin / location.hash

① window.name + iframe
页面A

let proxy = function(url, callback) {let count = 0;let iframe = document.createElement('iframe');iframe.src = url;iframe.onload = function() {if(count===0){iframe.contentWindow.location = 'http://www.github.cn/proxy.html';count++;return;}callback(iframe.contentWindow.name);};document.body.appendChild(iframe);
};//请求跨域B页面数据
proxy('http://www.github.cn/B.html', function(data){alert(data);
});

B页面

window.name = 'github';

proxy.html是空页面

② location.hash + iframe
A和C同源
A和B非同源

A页面

<iframe id="iframe" src="http://127.0.0.1:1002/B.html" style="display:none;"></iframe>
<script>let iframe = document.getElementById('iframe');//=>向B.html传hash值iframe.onload=function(){iframe.src = 'http://127.0.0.1:1002/B.html#msg=github';}//=>开放给同域C.html的回调方法function func(res) {alert(res);}
</script>

B 页面

<iframe id="iframe" src="http://127.0.0.1:1001/C.html" style="display:none;"></iframe>
<script>let iframe = document.getElementById('iframe');//=>监听A传来的HASH值改变，再传给C.htmlwindow.onhashchange = function () {iframe.src = "http://127.0.0.1:1001/C.html"+ location.hash;}
</script>

C页面

<script>//=>监听B传来的HASH值window.onhashchange = function () {//=>再通过操作同域A的js回调，将结果传回window.parent.parent.func(location.hash);};
</script>

③ document.domain + iframe
只能实现：同一主域，不同子域之间的操作
v.qq.com
sports.qq.com
父页面A http://www.github.cn/A.html

<iframe src="http://school.github.cn/B.html"></iframe>
<script>document.domain = 'github.cn';  // 相同的主域名var user = 'admin';
</script>

子页面B http://school.github.cn/B.html

<script>document.domain = 'github.cn';alert(window.parent.user);
</script>

** 7. WebSocket 协议跨域**
前端处理

<script src="./socket.io.js"></script>
<script>let socket = io('http://127.0.0.1:3001/');//=>连接成功处理socket.on('connect', function() {//=>监听服务端消息socket.on('message', function(msg) {console.log('data from server:' + msg); });//=>监听服务端关闭socket.on('disconnect', function() { console.log('server socket has closed!');});});//=>发送消息给服务器端socket.send("github");
</script>

服务器端处理

//=>监听socket连接：server是服务器创建的服务
socket.listen(server).on('connection', function(client) {//=>接收信息client.on('message', function(msg) {//=>msg客户端传递的信息//...client.send(msg+'@@');});//=>断开处理client.on('disconnect', function() {console.log('client socket has closed!');});
});

相关文章：

前端跨域2

前端跨域2 前端跨域解决方案&#xff08;11种方案&#xff09; 1.JSONP跨域解决方案的底层原理 script、img、link、iframe...<script src"https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>// 这个就是因为script标签没有跨域限制&#xff0…...

编程日记 2024/8/22 15:20:32

electron仿微信，新建贴合窗口

说明 在写electron项目时&#xff0c;只有一个主窗口不足以满足需求&#xff0c;我们通常还会打开很多个窗口。 怎么打开一个子窗口像微信的聊天界面一样&#xff0c;全贴合在一起&#xff0c;看起来像一个整体呢&#xff1a; 分析 这个窗口有点像element ui中的抽屉(drawe…...

编程日记 2024/8/22 15:18:23

uniapp微信小程序 分享功能

uniapp https://zh.uniapp.dcloud.io/api/plugins/share.html#onshareappmessage export default {onShareAppMessage(res) {if (res.from button) {// 来自页面内分享按钮console.log(res.target)}return {title: 自定义分享标题,path: /pages/test/test?id123}} }需要再真机…...

编程日记 2024/8/22 15:15:04

Java实现数据库数据到Excel的高效导出

在数据处理和分析工作中&#xff0c;经常需要将数据库中的数据导出到Excel文件中。本文将提供一个Java实现的示例&#xff0c;展示如何边从数据库读取数据&#xff0c;边将其写入Excel文件&#xff0c;同时注重内存效率。 环境配置&#xff1a; Java 1.8 或更高版本MySQL 5.7…...

编程日记 2024/8/22 15:13:52

python之matplotlib （8 极坐标）-圆与心

极坐标 极坐标图像的绘制类似于三维图像的绘制&#xff0c;只需要将projection参数由3d改为polar即可。 import numpy as np import matplotlib.pyplot as plt figplt.figure() axfig.add_subplot(projectionpolar)theta np.linspace(0, 2 * np.pi, 100) r np.sin(the…...

编程日记 2024/8/22 15:11:45

Kubernetes Pod调度基础

在传统架构中&#xff0c;我们总在考虑或者面临一个问题&#xff0c;我们的应用需要部署在哪里&#xff0c;我们的应用下载在哪里运行着?有一个服务不可访问了&#xff0c;去哪里排査?诸如此类的问题总是会出现在工作中。 但是在使用 Kubernetes 部署应用后&#xff…...

编程日记 2024/8/22 15:10:38

80页WORD方案深入了解大数据治理+大数据资产管理+数据运营

文档是一份80页可编辑的企业大数据智能管理与治理平台建设项目技术方案标书文档&#xff0c;涵盖了从项目需求分析、技术方案、建设方案、服务方案到类似案例介绍等多个方面的内容。 1. 项目需求分析 项目建设目标&#xff1a;旨在实现数据的可视化&#xff0c;确保决策者、行…...

编程日记 2024/8/22 15:07:30

OCC安装、VS2019编译运行（新手教程）

OCC安装、VS2019编译运行（新手教程） 简介1、OpenCasCade的下载和安装官网下载安装2、OpenCasCade的运行和编译（VS2019）修改配置文件环境变量配置3、验证代码项目配置运行cpp文件简介 作为一个刚接触OCC的程序员，可能会不知所措，无从下手，甚至在OCC的安装使用都困难重重…...

编程日记 2024/8/22 15:06:20

Mojo 实现排序功能

sort排序 实现排序功能。 您可以从包中导入这些 API。例如&#xff1a;algorithm from algorithm.sort import sortpartition partition[type: AnyRegType, cmp_fn: fn[AnyRegType]($0, $0, /) capturing -> Bool](buff: Pointer[*"type", 0], k: Int, size: …...

编程日记 2024/8/22 15:04:16

信息学奥赛一本通编程启蒙题解(3031~3035)

前言 Hello大家好我是文宇 正文 3031 #include<bits/stdc.h> using namespace std; double n,m,x; int main(){cin>>n>>m;xn-m*0.8;cout<<fixed<<setprecision(2)<<x;return 0; } 3032 #include<bits/stdc.h> using namespace…...

编程日记 2024/8/22 15:01:37

字符函数内存函数———C语言

字符分类函数 头文件&#xff1a; ctype.h 函数功能iscntrl判断字符是否为控制字符isspace判断字符是否为空白字符&#xff08;空格&#xff0c;换页、换行、回车、制表符或垂直制表符&#xff09;isdigit判断字符是否为十进制数字isxdigit判断字符是否为十六进制数字(0-9)(a…...

编程日记 2024/8/22 14:58:00

c语言跨文件传输数据

在 C 语言中&#xff0c;可以通过以下几种方式获取其他 C 文件中定义的变量&#xff1a; 一、使用 extern 关键字 在需要获取变量的文件中&#xff0c;使用extern关键字声明该变量。 例如&#xff0c;如果在other.c文件中有一个全局变量int globalVar;&#xff0c;在当前文件中…...

编程日记 2024/8/22 14:56:51

企业文件防泄密怎么做？10款透明加密软件排行榜

在信息时代&#xff0c;企业的核心竞争力往往体现在其拥有的知识和信息上&#xff0c;而企业文件的安全性直接关系到这些信息的保护。文件防泄密已成为企业管理中的重要议题&#xff0c;透明加密技术因其无缝集成和高效保护的特性&#xff0c;成为企业防泄密的首选方案。2024年…...

编程日记 2024/8/22 14:55:46

AI编程工具的力量：以AWS Toolkit与百度Comate为例，加速程序员开发效率

在当今的数字化转型浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术不仅重塑了众多行业&#xff0c;也为软件开发领域带来了革命性的变化。AI编程工具&#xff0c;凭借其智能化的特性&#xff0c;正在成为程序员提高开发效率、优化代码质量和加速产品迭代的重要助力…...

编程日记 2024/8/22 14:51:28

smallpdf: 免费高效的PDF水印添加工具

引言 在数字文档管理和分享的过程中&#xff0c;保护版权和确保文档的原创性变得尤为重要。PDF文件作为一种广泛使用的格式&#xff0c;经常需要添加水印来表明所有权或提醒查看者注意文档的敏感性。本文将介绍一款名为smallpdf的免费工具&#xff0c;它能够轻松地为PDF文件添…...

编程日记 2024/8/22 14:50:24

java整合modbusRTU与modbusTCP

理解 Modbus TCP 报文格式,Modbus TCP 报文格式如下： | Transaction ID (2 bytes) | Protocol ID (2 bytes) | Length (2 bytes) | Unit ID (1 byte) | Function Code (1 byte) | Data (N bytes) |Transaction ID：标识事务的唯一标识符,确保正确的 Transaction ID：每个请求…...

编程日记 2024/8/22 14:49:22

四、Docker使用

1. 快速入门 1.1. Docker背景介绍 Docker是一个开源的平台&#xff0c;用于开发、交付和运行应用程序。它能够在Windows&#xff0c;macOS&#xff0c;Linux计算机上运行&#xff0c;并将某一应用程序及其依赖项打包至一个容器中&#xff0c;这些容器可以在任何支持Docker的环…...

编程日记 2024/8/22 14:48:21

杰发科技AC7840——CAN通信简介(8)_通过波特率和时钟计算SEG_1/SEG_2/SJW/PRESC

通过公式计算 * 波特率和采样点计算公式&#xff1a;* tSeg1 (S_SEG_1 2); tSeg2 (S_SEG_2 1).* BandRate (SCR_CLK / (S_PRESC 1) / ((S_SEG_1 2) (S_SEG_2 1))), SCR_CLK 为CAN 模块源时钟* SamplePoint (tSeg1 / (tSeg1 tSeg2)). {0x0D, 0x04, 0x04, 0x3B},…...

编程日记 2024/8/22 14:47:20

开发日记-EaxyExcel修改模板sheet名称

引入pom&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel-core</artifactId><version>3.1.1</version><scope>compile</scope></dependency> 编写自定义拦截器&#xff1a; impo…...

编程日记 2024/8/22 14:46:19

微软AI人工智能认证有哪些？

微软提供的人工智能认证主要包括以下几个方面&#xff1a; Azure AI Fundamentals&#xff08;AI900认证&#xff09;&#xff1a;这是一个基础认证&#xff0c;旨在展示与Microsoft Azure软件和服务开发相关的基本AI概念&#xff0c;以创建AI解决方案。它面向具有技术和非技术…...

编程日记 2024/8/22 14:44:16

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/7/7 5:28:35

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/7/6 22:37:23

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/7/6 6:16:10

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/7/8 9:30:30

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/7/5 22:58:47

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/8 16:12:16

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/6/21 15:45:49

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2025/7/8 2:45:54

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/7/6 16:27:18

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

编程新知 2025/7/8 2:51:11