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

28_跨域

article 2026/2/18 15:29:54

promise

promise的基本语法

async await

try catch

promise 静态方法

跨域

跨域的解决方案

1-cors

编辑

2-jsonp方案

3-代理服务器

promise

promise 是一个es6新增的语法

承诺的意思作用:是专门用来解决回调地狱!!!!

promise的基本语法

  // 基本语法:// Promise中 写异步代码// let p1 = new Promise(function(resolve,reject){//resolve("成功")reject("失败")})// 一旦调用了.then 就会触发resolve 方法// 一旦调用了 .catch 就会触发   reject 方法p1.then(res=>{console.log(res);})p1.catch(err=>{console.log(err);})//promise 有三种状态// pending  -- 创建成功  等待中// fulfilled -- 调用了resolve  成功时执行// rejected  -- 调用了 reject  失败时执行

    new Promise(function(resolve,reject){resolve("成功")// reject("失败")}).then(res=>{console.log(res);}).catch(err=>{console.log(err);}).finally(()=>{console.log("成功失败都执行");})

async await

async await 是promise的语法糖

是一个es7的写法

一定要配对使用，，

await 后是一个promise对象

async 加在await所在的函数！！！

语法

async function fn(){await promise对象1await promise对象2。。。。
}
等着promise对象1执行完  走promise对象2

   // function fn() {//     new Promise((resolve, reject) => {//         setTimeout(() => {//             resolve();//             console.log("2秒后执行1111");//         }, 2000)//     }).then(res => {//         new Promise((resolve, reject) => {//             setTimeout(() => {//                 resolve();//                 console.log("2秒后执行222");//             }, 2000)//         })//     })// }async function fn(){await new Promise((resolve, reject)=>{setTimeout(() => {resolve();console.log("2秒后执行1111");}, 2000)})await new Promise((resolve, reject)=>{setTimeout(() => {resolve();console.log("2秒后执行222");}, 2000)})}fn()

try catch

async await 不能捕获失败，一旦失败 await后面的代码就不会执行,

可以借助try catch 捕获到错误的状态

     try {// 尝试走这里的代码let obj = null;obj.name = "哈哈";console.log(obj);} catch (error) {// error 就是一个形参  代表是你报错的信息// 如果有错  catch 捕获到错误console.log("写法有误");}

 async function fn() {try {let res = await new Promise((resolve, reject) => {setTimeout(() => {// resolve("成功")reject("失败123")}, 2000)console.log(9999);})// XXXconsole.log(res);} catch (error) {console.log("网络不好，请检查",error);// XXXX}}fn();

promise 静态方法

promise.all()

方法用于将多个promise实例，包装成一个新的promise实例

let p1 = new Promise((r, j) => {setTimeout(() => {r();console.log("p1成功");}, 2000)
})
let p2 = new Promise((r, j) => {setTimeout(() => {r();console.log("p2成功");}, 4000)
})// 等到 p1 和 p2 都执行成功时，就在干什么事儿？
// Promise.all 方法  返回值也是一个promise对象
let p = Promise.all([p1,p2]);
p.then(res=>{console.log("都成功了");
})

promise.race()

只要有一个promise对象有状态了（不管成功失败）就会执行触发race

 let p = Promise.race([p1,p2]);p.then(res=>{console.log(res,"有状态了");})p.catch(err=>{console.log(err,"有错误状态了");})

#axios库ajax封装后面学框架用的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script>
</head><body><script>// get强求//get无参数axios.get("http://localhost:8888/test/second").then(res => {console.log(res);})// get有参数axios.get("http://localhost:8888/test/third", {params: {name: "jack",age: 18}}).then(res => {console.log(res);})// post   三阶段 axios里 请求拦截器  也可以通过请求拦截器设置请求头axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";axios.post("http://localhost:8888/test/fourth", { name: "jack", age: 18 }).then(res=>{console.log(res);})</script>
</body></html>

跨域

什么是跨域？浏览器发起网络请求的时候会报一个跨域的错。

正常请求

从我的页面去请求weibo显示跨域错误

因为浏览器有同源策略的限制

同源策略：协议，域名，端口号有一个不一样时浏览器认为是不同的域，请求不到返回的数据(就是不让访问"认为不是一家人")

浏览器的域：http://127.0.0.1:5500/(当前前端页面)

服务器的域：Sina Visitor System

http 默认端口号 80

https默认端口号是 443

注意：同源策略是浏览器的，服务器没有这个东西
当我们想向别人的服务器发起请求时，会被阻止，因为有同源策略的限制
别人的服务器：
- 当你请求的地址的协议、域名、端口号有一个不同的时候就算是别人的服务器
- 这个时候就会触发同源策略的限制
- 触发了同源策略的限制就算跨域

默认情况下如果不处理都是会跨域的

<body><button>发起请求</button><script>var btn = document.querySelector("button");btn.onclick=async function(){// Access-Control-Allow-Origin: *// http://localhost:5500  浏览器let res = await axios.get("http://localhost:8888/test/second")console.log(res);}// btn.onclick=async function(){//     // access-control-allow-origin: https://s.weibo.com//     let res = await axios.get("https://weibo.com/ajax/side/hotSearch")//     console.log(res);// }</script>
</body>

响应头:access-control-allow-origin:http://s.weibo.com//表示你想访问微博热搜接口，只有这一个域能访问。//weibo.com域肯定是人家内部的服务器，只有weibo内部人员可以调用人家接口。你可以看人家接口的数据但是人家不让你访问。你调人家接口又不给人家钱人家服务器有压力

这个错误表示自己的域127.0.0.1去访问weibo.com的域被阻止了

人家的这套接口只允许weibo.com的域访问。

那域名能模拟吗？

跨域的解决方案

默认情况下都是跨域的，就算是本地。

1-cors

后端使用的解决方案

cors (Cross - origin resourse sharing) 跨域资源共享不管你浏览器什么端口允许浏览器跨服务器发起请求 #后端解决跨域#修改后端代码

做法 就是在请求头中  添加
Access-Control-Allow-Origin: * //表示所有域名都可以访问

打开后端代码：找到app.js

前提是先下载好 cors

const cors = require('cors')
app.use(cors())

2-jsonp方案

不是特别常用了，，面试时候会问

为什么jsonp可以借助script 标签实现跨域？因为script标签的src属性比较nb的天生是不受浏览器同源策略的限制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- wd  输入的关键词cb  是callback 回调函数--><script>function fn(res){console.log(res);}</script><!-- https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=1&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=jQuery110202603723661767965_1681222830429&_=1681222830432 --><script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=1&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=fn&_=1681222830432"></script>
</body>
</html>

百度搜索

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><ul></ul><script>var ipt = document.querySelector("input");ipt.oninput = function () {// console.log(this.value);// 通过script标签引入  接口地址  并且把value值给他传过去let url = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=${this.value}&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=fn&_=1681222830432`let script = document.createElement("script");script.src = url;document.body.appendChild(script)}let ul = document.querySelector("ul");function fn(res){let str = "";if(ipt.value===''){str="";ul.innerHTML = str;return}res.g.forEach(item => {str+=`<li>${item.q}</li>`});ul.innerHTML = str;}</script><!-- <script src="XXXXXXXX"></script> -->
</body></html>

3-代理服务器

28_跨域

目录 promise promise的基本语法 async await try catch promise 静态方法跨域跨域的解决方案 1-cors 编辑 2-jsonp方案 3-代理服务器 promise promise 是一个es6新增的语法承诺的意思作用:是专门用来解决回调地狱!!!! promise的基本语法 // 基本语法:// Pr…...

编程日记 2026/2/15 6:45:36

Stable Diffusion太慢？国内Midjourney平替方案—商用合规部署

一、AI绘画商用核心痛点（为什么需要替代Stable Diffusion/Midjourney？） 1. 速度慢，高并发支持差 Stable Diffusion：单卡GPU生成1张图需3-10秒，并发超过10任务易崩溃Midjourney：排队制&#xf…...

编程日记 2026/2/15 14:44:58

综述速读|086.04.24.Retrieval-Augmented Generation for AI-Generated Content A Survey

论文题目：Retrieval-Augmented Generation for AI-Generated Content: A Survey 论文地址：https://arxiv.org/abs/2402.19473 bib引用： misc{zhao2024retrievalaugmentedgenerationaigeneratedcontent,title{Retrieval-Augmented Generation…...

编程日记 2026/2/13 17:38:32

Spring @EnableAutoConfiguration 注解执行过程详解

Spring EnableAutoConfiguration 注解执行过程详解核心流程触发自动配置：通过 EnableAutoConfiguration 注解开启自动配置。加载配置类：根据 META-INF/spring.factories 文件加载默认的自动配置类。条件判断：每个自动配置类通过 Condition…...

编程日记 2026/2/14 15:48:30

JavaScript中的Math对象和随机数

目录一、常用数学方法 1. 数值处理 2. 极值与运算 3. 三角函数（参数为弧度） 4. 对数与指数 5. 常量二、随机数生成 Math.random() 1. 基础范围控制 2. 整数随机数三、实际应用场景 1. 随机颜色生成 2. 数组随机排序 3. 概率控制四、注…...

编程日记 2026/2/12 12:51:03

lxd-dashboard 图形管理LXD/LXC

前言 LXD-WEBGUI是一个完全用AngularJS编写的Web应用程序，无需应用服务器、数据库或其他后端服务支持。只需要简单地托管静态HTML和JavaScript文件，就能立即投入使用。这个项目目前处于测试阶段，提供了直观的用户界面，帮助用户便捷地管理和控制LXD实例。安装lxd-dashboa…...

编程日记 2026/2/14 19:02:12

python纯终端实现图片查看器（全彩）（windows）

很多人作为命令行爱好者，无法在终端内直接查看图片是无法忍受的， 那就写一个！ 先直接上代码 import os import sys from PIL import Image import numpy as np import colorama import msvcrt # Windows专用# 初始化colorama colorama.ini…...

编程日记 2026/2/8 22:01:21

【动态规划篇】- 路径问题

62. 不同路径题目链接： 62. 不同路径题目解析： 状态表示 dp[i][j]表示：以[i][j]为终点时，一共有多少种路径。状态转移方程以[i][j]最近的几步来分析问题，要么从[i-1][j]位置向下走一步到达[i][j],要么从[i][j-1…...

编程日记 2026/2/16 14:37:54

《新凯来：半导体设备制造领域的“国家队”》

《新凯来：半导体设备制造领域的“国家队”》一、SEMICON China 爆火出圈：31 款设备背后的 “深圳力量” 1.1 展会现象级热度在 2025 年 SEMICON China 展会现场，新凯来展台成了整届展会当之无愧的 “顶流”，被来自全球各地的专…...

编程日记 2026/2/15 19:08:09

AI大模型最新发布[update@202503]

OpenAI GPT-4o：多模态，“o”代表Omni，即全能的意思，凸显了其多功能的特性。多模态交互，GPT-4o可以接受文本、音频和图像的任意组合作为输入，并生成文本、音频和图像的任意组合输出。实时推理能力&#x…...

编程日记 2026/2/13 16:06:15

深入浅出 Embedding

1. 什么是 Embedding？ Embedding（嵌入）是一种将高维数据映射到低维连续空间的技术，用于表达数据的语义关系。简单来说，它是一种向量化表示，将文本、图像、用户行为等信息转换为数值向量，使得相似的数据在向量空间中距离更近。 2. 如何理解 Embedding？ 2.1 浅显易懂的…...

编程日记 2026/2/18 12:56:17

java项目之基于ssm的乡镇自来水收费系统（源码+文档）

项目简介乡镇自来水收费系统实现了以下功能： 乡镇自来水收费系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员管理水表，审核用户更换…...

编程日记 2026/2/13 2:39:38

Java实战：实现用户的登录注册功能

系列文章目录 Java文件 I/O流的操作实战和高级UI组件和事件监听的综合文章目录系列文章目录前言一、大致流程思路分析：二、定义用户类：三、服务层的实现： 1.保护用户数据功能的实现2.登录操作的实现四、实现用户的注册界面： 大…...

编程日记 2026/1/24 16:06:07

Spring AI MCP 架构详解

Spring AI MCP 架构详解 1.什么是MCP? MCP 是一种开放协议，它对应用程序向大语言模型（LLMs）提供上下文信息的方式进行了标准化。可以把 MCP 想象成人工智能应用程序的 USB-C 接口。就像 USB-C 为将设备连接到各种外围设备和配件提供了一种…...

编程日记 2026/2/14 5:45:35

目标识别与双目测距(1)环境搭建：Ubuntu+yolov5+pcl库

环境情况 ubuntu 18.04 → 20.04（最终） 安装Ubuntu1804虚拟机系统 Anaconda：可参考我的另一篇文章 Python 3.6.13 → 3.8（最终）Anaconda3-2021.05 目标识别：YOLOv5相关 1、安装git sudo apt install gi…...

编程日记 2026/2/15 11:39:35

OpenAI API - Agent

文章目录代理概述模型工具知识与记忆防护栏编排入门语音代理选择正确的架构语音到语音（多模态）架构链式架构构建语音代理使用语音到语音架构进行实时处理将音频输入链接到文本处理 → 音频输出代理了解如何使用 OpenAI API 构建代理。 https://pl…...

编程日记 2026/2/14 7:37:05

excel 时间戳转日期

在Excel中，将时间戳转换为日期格式，可以使用以下步骤和方法： 一、了解时间戳时间戳（Timestamp）通常是从1970年1月1日（UTC时间）开始的秒数或毫秒数。这个时间点被称为“Unix纪元”或“Unix时间…...

编程日记 2025/6/18 3:26:12

Strawberry perl的下载,查询版本号,配置Path环境变量,查找perl解释器的位置

Strawberry Perl 是一个适用于 Microsoft Windows 的 Perl 环境，包含运行和开发 Perl 应用程序所需的一切。它旨在尽可能接近 UNIX 系统上的 Perl 环境。下载官网: Strawberry Perl for Windows - Releases 各个版本: Strawberry Perl for Windows - Releases …...

编程日记 2026/2/12 18:41:25

MySQL的基础语法2（函数-字符串函数、数值函数、日期函数和流程函数）

目录一、字符串函数 1.常见字符串函数编辑 2.字符串函数的基本使用 3.字符串函数的数据库案例演示二、数值函数 1.常见数值函数（如下）： 2.数值函数的基本使用 3.数值函数的数据库案例演示三、日期函数 1.常见的日期函数 2.日…...

编程日记 2026/2/13 8:01:14

5G_WiFi_CE_杂散测试

目录一、规范要求 1、法规目录： 2、限值： （1）带外发射杂散 （2）带内发射杂散 （3）接收杂散二、测试方法 1、带外发射杂散 （1）测试条件 &#xff08…...

编程日记 2026/2/14 21:35:56

理解Kubernetes中CoreDNS域名解析与DNS策略

CoreDNS是什么 CoreDNS是一个灵活可扩展的DNS服务器，使用Go语言编写，旨在提供快速、灵活的DNS服务为什么需要CoreDNS CoreDNS为Kubernetes集群内部的DNS解析提供服务，使得服务之间能够通过域名互相通信 Kubernetes集群中, CoreDNS是运行在…...

编程日记 2026/2/13 23:47:39

大数据Spark（五十五）：Spark框架及特点

文章目录 Spark框架及特点一、Spark框架介绍二、Spark计算框架具备以下特点 Spark框架及特点一、Spark框架介绍 Apache Spark 是一个专为大规模数据处理而设计的快速、通用的计算引擎。最初由加州大学伯克利分校的 AMP 实验室（Algorithms, Machines, and Pe…...

编程日记 2026/2/15 12:19:52

UI产品经理基础（六）：如何解决用户的质疑？

在需求调查中遇到用户质疑“不专业”或“不了解需求”，本质上是用户对产品经理的信任缺失或沟通鸿沟导致的。要化解这种质疑，需从专业能力展示、沟通方式优化、用户参与感提升三个维度切入，结合具体场景采取针对性策略。以下是系统化的解决方…...

编程日记 2026/2/13 23:59:10

【大数据技术】大数据技术概念及概述

1. 大数据概念数据是实时或观察的结果是对客观事务的逻辑归纳是用于表示客观事物的未经加工的原始素材数据的产生对客观事务的计量和记录尝试的数据单位换算1 byte8 bit1 k1024 byte1 mb1024 k1 g1024 m1 t1024 g1 p1024 t1 e1024 p1 z1024 e1 y1024 z1 b1024 y1 n10…...

编程日记 2026/2/13 0:35:20

高等数学-第七版-上册选做记录习题7-4

1. 2....

编程日记 2026/2/15 18:05:29

Python库（）

1.概念 Matplotlib 库：是一款用于数据可视化的 Python 软件包，支持跨平台运行，它能够根据 NumPy ndarray 数组来绘制 2D 图像，它使用简单、代码清晰易懂 Matplotlib 图形组成： Figure：指整个图形&#xf…...

编程日记 2026/2/14 3:55:41

AI知识补全（八）：多模态大模型是什么？

名人说：人生如逆旅，我亦是行人。 ——苏轼《临江仙送钱穆父》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：AI知识补全（七）：AI Agent 智能…...

编程日记 2026/2/16 2:08:27

复习MySQL20250327

第一章基本操作一、管理数据库难点：创建数据库输入cmd的MySQL安装路径C:\Program Files\MySQL\MySQL Server 8.0\bin 1.查看所有数据库 show databases; 2.创建数据库 create database hsusers default charset utf8 collate utf8_general_ci;create data…...

编程日记 2026/2/14 19:46:11

Docker-MySQL安装-命令解读-常见命令-数据卷挂载-本地目录挂载-自定义镜像-网络-前端部署-DockerCompose

目录 Docker： 安装MySQL： 镜像容器： 镜像仓库： 编辑命令解读： 镜像命名规范： docker run中常见参数： Docker常见命令： 编辑数据卷： 编辑数据卷-操作命令&…...

编程日记 2026/2/4 17:45:58

Docker 安装部署Harbor 私有仓库

Docker 安装部署Harbor 私有仓库系统环境:redhat x86_64 一、首先部署docker 环境定制软件源 wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repoyum install -y yum-utils device-mapper-persistent-data lvm2…...

编程日记 2026/2/15 23:10:39

promise

promise的基本语法

async await

try catch

promise 静态方法

跨域

跨域的解决方案

1-cors

2-jsonp方案

3-代理服务器

相关文章：