28_跨域

news2025/4/3 7:08:08

目录

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对象1
	await 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);
                })
                // XXX
                console.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的天生是 不受浏览器同源策略的限制

<script src="XXXXXXXXXX"> </script>

<!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-代理服务器

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

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

相关文章

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

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

一、AI绘画商用核心痛点&#xff08;为什么需要替代Stable Diffusion/Midjourney&#xff1f;&#xff09; 1. 速度慢&#xff0c;高并发支持差 Stable Diffusion&#xff1a;单卡GPU生成1张图需3-10秒&#xff0c;并发超过10任务易崩溃Midjourney&#xff1a;排队制&#xf…
阅读更多...
综述速读|086.04.24.Retrieval-Augmented Generation for AI-Generated Content A Survey

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

论文题目&#xff1a;Retrieval-Augmented Generation for AI-Generated Content: A Survey 论文地址&#xff1a;https://arxiv.org/abs/2402.19473 bib引用&#xff1a; misc{zhao2024retrievalaugmentedgenerationaigeneratedcontent,title{Retrieval-Augmented Generation…
阅读更多...
JavaScript中的Math对象和随机数

JavaScript中的Math对象和随机数

目录 一、常用数学方法 1. 数值处理 2. 极值与运算 3. 三角函数&#xff08;参数为弧度&#xff09; 4. 对数与指数 5. 常量 二、随机数生成 Math.random() 1. 基础范围控制 2. 整数随机数 三、实际应用场景 1. 随机颜色生成 2. 数组随机排序 3. 概率控制 四、注…
阅读更多...
lxd-dashboard 图形管理LXD/LXC

lxd-dashboard 图形管理LXD/LXC

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

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

很多人作为命令行爱好者&#xff0c;无法在终端内直接查看图片是无法忍受的&#xff0c; 那就写一个&#xff01; 先直接上代码 import os import sys from PIL import Image import numpy as np import colorama import msvcrt # Windows专用# 初始化colorama colorama.ini…
阅读更多...
【动态规划篇】- 路径问题

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

62. 不同路径 题目链接&#xff1a; 62. 不同路径 题目解析&#xff1a; 状态表示 dp[i][j]表示&#xff1a;以[i][j]为终点时&#xff0c;一共有多少种路径。 状态转移方程 以[i][j]最近的几步来分析问题&#xff0c;要么从[i-1][j]位置向下走一步到达[i][j],要么从[i][j-1…
阅读更多...
《新凯来：半导体设备制造领域的“国家队”》

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

《新凯来&#xff1a;半导体设备制造领域的“国家队”》 一、SEMICON China 爆火出圈&#xff1a;31 款设备背后的 “深圳力量” 1.1 展会现象级热度 在 2025 年 SEMICON China 展会现场&#xff0c;新凯来展台成了整届展会当之无愧的 “顶流”&#xff0c;被来自全球各地的专…
阅读更多...
AI大模型最新发布[update@202503]

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

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

深入浅出 Embedding

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

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

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

Spring AI MCP 架构详解

Spring AI MCP 架构详解 1.什么是MCP? MCP 是一种开放协议&#xff0c;它对应用程序向大语言模型&#xff08;LLMs&#xff09;提供上下文信息的方式进行了标准化。可以把 MCP 想象成人工智能应用程序的 USB-C 接口。就像 USB-C 为将设备连接到各种外围设备和配件提供了一种…
阅读更多...
目标识别与双目测距(1)环境搭建：Ubuntu+yolov5+pcl库

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

环境情况 ubuntu 18.04 → 20.04&#xff08;最终&#xff09; 安装Ubuntu1804虚拟机系统 Anaconda&#xff1a;可参考我的另一篇文章 Python 3.6.13 → 3.8&#xff08;最终&#xff09;Anaconda3-2021.05 目标识别&#xff1a;YOLOv5相关 1、安装git sudo apt install gi…
阅读更多...
OpenAI API - Agent

OpenAI API - Agent

文章目录 代理概述模型工具知识与记忆防护栏编排入门 语音代理选择正确的架构语音到语音&#xff08;多模态&#xff09;架构链式架构 构建语音代理使用语音到语音架构进行实时处理将音频输入链接到文本处理 → 音频输出 代理 了解如何使用 OpenAI API 构建代理。 https://pl…
阅读更多...
Strawberry perl的下载,查询版本号,配置Path环境变量,查找perl解释器的位置

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

Strawberry Perl 是一个适用于 Microsoft Windows 的 Perl 环境&#xff0c;包含运行和开发 Perl 应用程序所需的一切。它旨在尽可能接近 UNIX 系统上的 Perl 环境。 下载 官网: Strawberry Perl for Windows - Releases 各个版本: Strawberry Perl for Windows - Releases …
阅读更多...
MySQL的基础语法2（函数-字符串函数、数值函数、日期函数和流程函数 ）

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

目录 一、字符串函数 1.常见字符串函数 ​编辑 2.字符串函数的基本使用 3.字符串函数的数据库案例演示 二、数值函数 1.常见数值函数&#xff08;如下&#xff09;&#xff1a; 2.数值函数的基本使用 3.数值函数的数据库案例演示 三、日期函数 1.常见的日期函数 2.日…
阅读更多...
5G_WiFi_CE_杂散测试

5G_WiFi_CE_杂散测试

目录 一、规范要求 1、法规目录&#xff1a; 2、限值&#xff1a; &#xff08;1&#xff09;带外发射杂散 &#xff08;2&#xff09;带内发射杂散 &#xff08;3&#xff09;接收杂散 二、测试方法 1、带外发射杂散 &#xff08;1&#xff09;测试条件 &#xff08…
阅读更多...
大数据Spark（五十五）：Spark框架及特点

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

文章目录 Spark框架及特点 一、Spark框架介绍 二、Spark计算框架具备以下特点 Spark框架及特点 一、Spark框架介绍 Apache Spark 是一个专为大规模数据处理而设计的快速、通用的计算引擎。最初由加州大学伯克利分校的 AMP 实验室&#xff08;Algorithms, Machines, and Pe…
阅读更多...
UI产品经理基础（六）：如何解决用户的质疑？

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

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

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

1. 大数据概念 数据 是实时或观察的结果是对客观事务的逻辑归纳是用于表示客观事物的未经加工的原始素材 数据的产生 对客观事务的计量和记录尝试的数据 单位换算1 byte8 bit1 k1024 byte1 mb1024 k1 g1024 m1 t1024 g1 p1024 t1 e1024 p1 z1024 e1 y1024 z1 b1024 y1 n10…
阅读更多...
高等数学-第七版-上册 选做记录 习题7-4

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

1. 2.
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023