跨域的几种方案

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名、端口有一个不同就是跨域，Ajax 请求会失败。

我们可以通过以下几种常用方法解决跨域的问题

JSONP

JSONP 的原理很简单，就是利用 <script> 标签没有跨域限制的漏洞。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据

涉及到的端

JSONP 需要服务端和前端配合实现。

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>function jsonp(data) {console.log(data)}
</script>

JSONP 使用简单且兼容性不错，但是只限于 get 请求

具体实现方式

在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP，以下是简单实现

function jsonp(url, jsonpCallback, success) {let script = document.createElement("script");script.src = url;script.async = true;script.type = "text/javascript";window[jsonpCallback] = function(data) {success && success(data);};document.body.appendChild(script);
}
jsonp("http://xxx","callback",function(value) {console.log(value);}
);

CORS

CORS （Cross-Origin Resource Sharing，跨域资源共享） 是目前最为广泛的解决跨域问题的方案。方案依赖服务端/后端在响应头中添加 Access-Control-Allow-* 头，告知浏览器端通过此请求

涉及到的端

CORS 只需要服务端/后端支持即可，不涉及前端改动

  • CORS需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。
  • 浏览器会自动进行 CORS 通信，实现CORS通信的关键是后端。只要后端实现了 CORS，就实现了跨域。
  • 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源

只要后端实现了 CORS，就实现了跨域

image.png

以 koa框架举例

添加中间件，直接设置Access-Control-Allow-Origin请求头

app.use(async (ctx, next)=> {ctx.set('Access-Control-Allow-Origin', '*');ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');if (ctx.method == 'OPTIONS') {ctx.body = 200; } else {await next();}
})

具体实现方式

CORS 将请求分为简单请求（Simple Requests）和需预检请求（Preflighted requests），不同场景有不同的行为

简单请求：不会触发预检请求的称为简单请求。当请求满足以下条件时就是一个简单请求：

  • 请求方法：GET、HEAD、POST。
  • 请求头：Accept、Accept-Language、Content-Language、Content-Type。
    • Content-Type 仅支持：application/x-www-form-urlencoded、multipart/form-data、text/plain

需预检请求：当一个请求不满足以上简单请求的条件时，浏览器会自动向服务端发送一个 OPTIONS 请求，通过服务端返回的Access-Control-Allow-* 判定请求是否被允许

CORS 引入了以下几个以 Access-Control-Allow-* 开头：

  • Access-Control-Allow-Origin 表示允许的来源
  • Access-Control-Allow-Methods 表示允许的请求方法
  • Access-Control-Allow-Headers 表示允许的请求头
  • Access-Control-Allow-Credentials 表示允许携带认证信息

当请求符合响应头的这些条件时，浏览器才会发送并响应正式的请求

nginx反向代理

反向代理只需要服务端/后端支持，几乎不涉及前端改动，只用切换接口即可

nginx 配置跨域，可以为全局配置和单个代理配置(两者不能同时配置)

全局配置，在nginx.conf文件中的 http 节点加入跨域信息

http {# 跨域配置add_header 'Access-Control-Allow-Origin' '$http_origin' ;add_header 'Access-Control-Allow-Credentials' 'true' ;add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS' ;add_header 'Access-Control-Allow-Headers' 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With' ;
}

局部配置（单个代理配置跨域）, 在路径匹配符中加入跨域信息

server {listen       8080;server_name  server_name;charset utf-8;location / {# 这里配置单个代理跨域，跨域配置add_header 'Access-Control-Allow-Origin' '$http_origin' ;add_header 'Access-Control-Allow-Credentials' 'true' ;add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS' ;add_header 'Access-Control-Allow-Headers' 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With' ;#配置代理 代理到本机服务端口proxy_pass http://127.0.0.1:9000;proxy_redirect   off;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}

Node 中间层接口转发

const router = require('koa-router')()
const rp = require('request-promise');// 通过node中间层转发实现接口跨域
router.post('/github', async (ctx, next) => {let {category = 'trending',lang = 'javascript',limit,offset,period} = ctx.request.body lang = lang || 'javascript'limit = limit || 30offset = offset || 0period = period || 'week'let res =  await rp({method: 'POST',// 跨域的接口uri: `https://e.juejin.cn/resources/github`,body: {category,lang,limit,offset,period},json: true})ctx.body = res
})module.exports = router

Proxy

如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在vue.config.js文件，新增以下代码

module.exports = {devServer: {host: '127.0.0.1',port: 8080,open: true,// vue项目启动时自动打开浏览器proxy: {'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址changeOrigin: true, //是否跨域pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替'^/api': "" }}}}
}

通过axios发送请求中，配置请求的根路径

axios.defaults.baseURL = '/api'

此外，还可通过服务端实现代理请求转发，以express框架为例

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false}));
module.exports = app

websocket

webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信

原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:3000})实例，利用message接收数据，利用send向客户端发送数据。具体看以下代码：

function socketConnect(url) {// 客户端与服务器进行连接let ws = new WebSocket(url); // 返回`WebSocket`对象，赋值给变量ws// 连接成功回调ws.onopen = e => {console.log('连接成功', e)ws.send('我发送消息给服务端'); // 客户端与服务器端通信}// 监听服务器端返回的信息ws.onmessage = e => {console.log('服务器端返回：', e.data)// do something}return ws; // 返回websocket对象
}
let wsValue = socketConnect('ws://121.40.165.18:8800'); // websocket对象

document.domain（不常用）

  • 该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。
  • 只需要给页面添加 document.domain = ‘test.com’ 表示二级域名都相同就可以实现跨域
  • 自 Chrome 101 版本开始，document.domain 将变为可读属性，也就是意味着上述这种跨域的方式被禁用了

postMessage（不常用）

在两个 origin 下分别部署一套页面 A 与 B，A 页面通过 iframe 加载 B 页面并监听消息，B 页面发送消息

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息

// 发送消息端
window.parent.postMessage('message', 'http://test.com');
// 接收消息端
var mc = new MessageChannel();
mc.addEventListener('message', (event) => {var origin = event.origin || event.originalEvent.origin;if (origin === 'http://test.com') {console.log('验证通过')}
});

window.name（不常用）

主要是利用 window.name 页面跳转不改变的特性实现跨域，即 iframe 加载一个跨域页面，设置 window.name，跳转到同域页面，可以通过 $(‘iframe’).contentWindow.name 拿到跨域页面的数据

实例说明

比如有一个www.example.com/a.html页面。需要通过a.html页面里的js来获取另一个位于不同域上的页面www.test.com/data.html中的数据。

data.html页面中设置一个window.name即可,代码如下

<script>window.name = "我是data.html中设置的a页面想要的数据";
</script>
  • 那么接下来问题来了，我们怎么把data.html页面载入进来呢，显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面（因为我们现在需要实现的是a.html页面不跳转,但是也能够获取到data.html中的数据）
  • 具体的实现其实就是在a.html页面中使用一个隐藏的iframe来充当一个中间角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。
  • 充当中间人的iframe想要获取到data.html中通过window.name设置的数据，只要要把这个iframe的src设置为www.test.com/data.html即可,然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的widnow.name的值，还必须把这个iframe的src设置成跟a.html页面同一个域才行，不然根据同源策略，a.html是不能访问到iframe中的window.name属性的
<!-- a.html中的代码 -->
<iframe id="proxy" src="http://www.test.com/data.html" style="display: none;" onload = "getData()"> <script>function getData(){var iframe = document.getElementById('proxy);iframe.onload = function(){var data = iframe.contentWindow.name;//上述即为获取iframe里的window.name也就是data.html页面中所设置的数据；}iframe.src = 'b.html'; //这里的b为随便的一个页面，只有与a.html同源就行，目的让a.html等访问到iframe里的东西，设置成about:blank也行}
</script>

上面的代码只是最简单的原理演示代码，你可以对使用js封装上面的过程，比如动态的创建iframe,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的iframe

补充

跨域与监控

前端项目在统计前端报错监控时会遇到上报的内容只有 Script Error 的问题。这个问题也是由同源策略引起。在 <script> 标签上添加 crossorigin=“anonymous” 并且返回的 JS 文件响应头加上 Access-Control-Allow-Origin: * 即可捕捉到完整的错误堆栈

跨域与图片

前端项目在图片处理时可能会遇到图片绘制到 Canvas 上之后却不能读取像素或导出 base64 的问题。这个问题也是由同源策略引起。解决方式和上文相同，给图片添加 crossorigin=“anonymous” 并在返回的图片文件响应头加上 Access-Control-Allow-Origin: * 即可解决

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于EFISH-SCB-RK3576/SAIL-RK3576的智能安检机技术方案‌

基于EFISH-SCB-RK3576/SAIL-RK3576的智能安检机技术方案‌

&#xff08;国产化替代J1900的全场景技术解析&#xff09; 一、硬件架构设计‌ ‌核心处理模块‌ ‌异构计算架构‌&#xff1a; ‌四核Cortex-A72&#xff08;2.3GHz&#xff09;‌&#xff1a;运行X光图像重建算法&#xff08;FDK反投影&#xff09;&#xff0c;支持双能谱…
阅读更多...
MQ防重复消费----去重表结合 Spring AOP 切面编程，抽象封装成通用幂等注解

MQ防重复消费----去重表结合 Spring AOP 切面编程，抽象封装成通用幂等注解

以下内容包含针对 NoMQDuplicateConsumeAspect 的深度面试问答、消息队列重投递触发场景、AOP 切面编程扩展&#xff0c;以及基于已有实现的关键要点与步骤总结。文中所有论断均引用多源资料&#xff0c;以助于您在面试与实战中全面展示对幂等消费切面及消息重投的理解。 一、深…
阅读更多...
[:, :, 1]和[:, :, 0] 的区别； `prompt_vector` 和 `embedding_matrix`的作用

[:, :, 1]和[:, :, 0] 的区别； `prompt_vector` 和 `embedding_matrix`的作用

prompt_vector = torch.sum(prompt_embedding * attention_weights.unsqueeze(-1), dim=1) # [1, hidden_dim] prompt_vector = torch.sum(prompt_embedding * attention_weights.unsqueeze(-1), dim=1) 主要作用是通过将 prompt_embedding 与 attention_weights 相乘后再按指…
阅读更多...
Dinky 安装部署并配置提交 Flink Yarn 任务

Dinky 安装部署并配置提交 Flink Yarn 任务

官方文档 https://www.dinky.org.cn/docs/1.1/deploy_guide/normal_deploy 版本 dinky 1.1.0、1.2.3 当前最新发布版本为 1.2.3 &#xff0c;但是官方文档最新稳定版为 1.1 &#xff0c;所以先选择 1.1.0&#xff0c;验证通过后&#xff0c;再尝试 1.2.3 &#xff0c;发现 1…
阅读更多...
java连数据库

java连数据库

一、准备工作 ​​安装MySQL数据库​​ 确保已安装MySQL服务器并启动服务 ​​下载JDBC驱动​​ 官方驱动&#xff1a;MySQL Connector/JMaven依赖&#xff1a; <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactI…
阅读更多...
【生态信息】开源软件全方位解析

【生态信息】开源软件全方位解析

开源软件(0pen Source Software&#xff0c;0ss)是指其源代码可以公开发布、查看、使用和修改的软件。这一概念的核心在于开放性和共享性&#xff0c;允许开发者自由地使用、修改、分发以及改进软件。开源软件通常遵循特定的开源许可证&#xff0c;这些许可证确保了软件的自由使…
阅读更多...
探秘 DeerFlow：字节跳动开源的科研创作魔法盒！

探秘 DeerFlow：字节跳动开源的科研创作魔法盒！

1.前言 字节跳动于2025年5月9日开源了名为DeerFlow的全新Deep Research项目&#xff0c;该项目基于LangStack框架&#xff0c;旨在通过人工智能技术简化科研和内容创作流程。DeerFlow整合了语言模型、网络搜索、爬虫和Python代码执行等多种工具&#xff0c;支持深度研究、MCP集…
阅读更多...
机器学习第十一讲：标准化 → 把厘米和公斤单位统一成标准值

机器学习第十一讲：标准化 → 把厘米和公斤单位统一成标准值

机器学习第十一讲&#xff1a;标准化 → 把厘米和公斤单位统一成标准值 资料取自《零基础学机器学习》。 查看总目录&#xff1a;学习大纲 关于DeepSeek本地部署指南可以看下我之前写的文章&#xff1a;DeepSeek R1本地与线上满血版部署&#xff1a;超详细手把手指南 一、买菜…
阅读更多...
less中使用 @supports

less中使用 @supports

在Less中使用supports supports 是CSS的条件规则&#xff0c;用于检测浏览器是否支持特定的CSS属性或值。在Less中&#xff0c;你可以像在普通CSS中一样使用supports&#xff0c;同时还能利用Less的特性来增强它。 基本用法 /* 检测浏览器是否支持display: flex */ supports …
阅读更多...
LeetCode Hot100 (1/100)

LeetCode Hot100 (1/100)

目录 一、有关数组和动态数组的排序&#xff08;sort函数&#xff09; 1.普通数组的排序 基本用法 降序排序 2.vector的排序 基本用法 降序排序 二、数组长度和一些vector的基本语法 1. 静态数组长度计算​ 2. 安全获取数组长度&#xff08;C17 起&#xff09;​ 3.vecto…
阅读更多...
通过MCP让LLM调用系统接口

通过MCP让LLM调用系统接口

场景 MCP的出现大大丰富了LLM的功能&#xff0c;对于存量系统&#xff0c;我们希望能让模型调用已有的接口&#xff0c;以最小的成本让AI能够获取系统内部数据。因此我们开发了一个名为http-api-call的MCP Server&#xff0c;来支持模型到内部API的调用 实现方案 使用用标准…
阅读更多...
基于Transformer的多资产收益预测模型实战（附PyTorch实现与避坑指南）

基于Transformer的多资产收益预测模型实战（附PyTorch实现与避坑指南）

基于Transformer的多资产收益预测模型实战（附PyTorch模型训练及可视化完整代码） 一、项目背景与目标 在量化投资领域，利用时间序列数据预测资产收益是核心任务之一。传统方法如LSTM难以捕捉资产间的复杂依赖关系，而Transformer架构通过自注意力机制能有效建模多资产间的联…
阅读更多...
养生：打造健康生活的全方位策略

养生：打造健康生活的全方位策略

在生活节奏不断加快的当下&#xff0c;养生已成为提升生活质量、维护身心平衡的重要方式。从饮食、运动到睡眠&#xff0c;再到心态调节&#xff0c;各个方面的养生之道共同构建起健康生活的坚实基础。以下为您详细介绍养生的关键要点&#xff0c;助您拥抱健康生活。 饮食养生…
阅读更多...
轻型汽车鼓式液压制动器系统设计

轻型汽车鼓式液压制动器系统设计

一、设计基础参数 1.1 整车匹配参数 参数项数值范围整备质量1200-1500kg最大设计车速160km/h轮胎规格195/65 R15制动法规要求GB 12676-2014 1.2 制动性能指标 制动减速度&#xff1a;≥6.2m/s&#xff08;0型试验&#xff09; 热衰退率&#xff1a;≤30%&#xff08;连续10…
阅读更多...
无法更新Google Chrome的解决问题

无法更新Google Chrome的解决问题

解决问题&#xff1a;原文链接&#xff1a;【百分百成功】Window 10 Google Chrome无法启动更新检查&#xff08;错误代码为1&#xff1a;0x80004005&#xff09; google谷歌chrome浏览器无法更新Chrome无法更新至最新版本&#xff1f; 下载了 就是更新Google Chrome了
阅读更多...
【AAAI 2025】 Local Conditional Controlling for Text-to-Image Diffusion Models

【AAAI 2025】 Local Conditional Controlling for Text-to-Image Diffusion Models

Local Conditional Controlling for Text-to-Image Diffusion Models&#xff08;文本到图像扩散模型的局部条件控制&#xff09; 文章目录 内容摘要关键词作者及研究团队项目主页01 研究领域待解决问题02 论文解决的核心问题03 关键解决方案04 主要贡献05 相关研究工作06 解决…
阅读更多...
Kuka AI音乐AI音乐开发「人声伴奏分离」 —— 「Kuka Api系列|中文咬字清晰|AI音乐API」第6篇

Kuka AI音乐AI音乐开发「人声伴奏分离」 —— 「Kuka Api系列|中文咬字清晰|AI音乐API」第6篇

导读 今天我们来了解一下 Kuka API 的人声与伴奏分离功能。 所谓“人声伴奏分离”&#xff0c;顾名思义&#xff0c;就是将一段完整的音频拆分为两个独立的轨道&#xff1a;一个是人声部分&#xff0c;另一个是伴奏&#xff08;乐器&#xff09;部分。 这个功能在音乐创作和…
阅读更多...
Idea 设置编码UTF-8 Idea中 .properties 配置文件中文乱码

Idea 设置编码UTF-8 Idea中 .properties 配置文件中文乱码

Idea 设置编码UTF-8 Idea中 .properties 配置文件中文乱码 一、设置编码 1、步骤&#xff1a; File -> Setting -> Editor -> File encodings --> 设置编码二、配置文件中文乱码 1、步骤&#xff1a; File -> Setting -> Editor -> File encodings ->…
阅读更多...
Xilinx FPGA PCIe | XDMA IP 核 / 应用 / 测试 / 实践

Xilinx FPGA PCIe | XDMA IP 核 / 应用 / 测试 / 实践

注&#xff1a;本文为 “Xilinx FPGA 中 PCIe 技术与 XDMA IP 核的应用” 相关文章合辑。 图片清晰度受引文原图所限。 略作重排&#xff0c;未整理去重。 如有内容异常&#xff0c;请看原文。 FPGA&#xff08;基于 Xilinx&#xff09;中 PCIe 介绍以及 IP 核 XDMA 的使用 N…
阅读更多...
sqli—labs第六关——双引号报错注入

sqli—labs第六关——双引号报错注入

一&#xff1a;判断输入类型 首先测试 ?id1&#xff0c;?id1&#xff0c;?id1"&#xff0c;页面回显均无变化 所以我们采用简单的布尔测试&#xff0c;分别测试数字型&#xff0c;单引号&#xff0c;双引号 然后发现&#xff0c;只有在测试到双引号注入的时候符合关键…
阅读更多...
最新文章

Copyright @ 2022~2023