AJAX(二) axios、fetch发送请求，同源策略，跨域解决方案等

已于 2023-06-10 21:59:52 修改
阅读量2k 收藏
点赞数 2
文章标签： ajax 前端
于 2023-06-10 12:56:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DogEgg_001/article/details/131132519
版权

目录

（一）其他函数的AJAX请求发送

1.axios函数

（1）发送get请求

（2）发送post请求

（3）axios函数发送请求

2.fetch函数（较少使用）

（二）跨域

1.同源策略

（1）概念

（2）案例证明

2.解决跨域的方案

（1）JSONP

（2）CORS

（一）其他函数的AJAX请求发送

1.axios函数

引入axios方法：

  1. 在<head>里引入<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>（bootstrap网站里找）
  2. 下载axios：npm install axios -g

推荐第一种方法

服务端：

app.all('/axios-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应头 允许任意类型的请求头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置发送
    response.send('response from axios!')
})

（1）发送get请求

// 点击get发送请求
btns[0].addEventListener('click', function () {
    // get请求
    axios.get('/axios-server', {
    // url参数
    params: {
        id: 123,
        vip: true
    },
    // 请求头信息
    headers: {
        Name: 'csq',
        Age: 18
    }
}).then(response => (
        console.log(response) //获取响应结果 promise的then函数
    ))
})

promise的then()函数，现在还不清楚具体的功能和原理，学完ajax就补

用于获取响应体的信息

 

（2）发送post请求

// 点击post发送请求 
btns[1].addEventListener('click', function () {
    // 发送post 格式：post(url{},{请求体data},{其他参数})
    axios.post('/axios-server', {
        // 请求体
        uname: 'admin',
        pwd: '123'
    }, {
        // 其它参数
        // url参数
        params: {
            id: 1,
            vip: true
        },
        // 请求头
        headers: {
            Name: 'csq',
            Age: 18
        }    
    })
})

 格式：post(url{},{请求体data},{其他参数}) 

（3）axios函数发送请求

// 点击ajax 用axios函数发送请求
btns[2].addEventListener('click', function () {
    axios({
        // 发送方式（默认get）
        method: 'POST',
        // url
        url: '/axios-server',
        // url参数
        params: {
            id: 1,
            vip: true
        },
        // 请求头
        headers: {
            Name: 'csq',
            Age: 18
        },
        // 请求体
        data: {
            uname: 'admin',
            pwd: '123'
        }
    }).then(response => {
        // promise 获取数据
        console.log(response)
        console.log(response.status)
        console.log(response.statusText)
        console.log(response.headers)
        console.log(response.data)
        console.log(response.config.headers.Name)
    })
})

 

2.fetch函数（较少使用）

服务端：

// fetch函数 响应路由规则
app.all('/fetch-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应头 允许任意类型的请求头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置发送
    response.send('response from fetch!')
})
// fetch函数发送请求
btn.addEventListener('click', function () 
    fetch('http://127.0.0.1:8000/fetch-server', {
        // 发送方式
        method: 'POST',
        // url参数
        params: { 
            id: 123,
            vip: true
        },
        // 请求头信息
        headers: {
            Name: 'csq',
            Age: 18
        }, 
        // 请求体 字符串类型 还有别的类型：formData等
        body: 'uname=admin&pwd=123'
        // 响应体的结果获取 then返回promise类型
    }).then(response => {
        return response.text()//转换成字符串类型
        // return response.json() //转换成json类型
    }).then(response => {
        console.log(response)
    })
})

 此处使用两个then()函数 

（二）跨域

1.同源策略

（1）概念

同源策略是浏览器最核心最基本的安全功能

如果2个URL的协议、域名(主机)、端口号都相同，则称它们同源

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染

如果非同源(即跨域)，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收

跨域不能进行如下操作：

  • Cookie、LocalStorage 和 IndexDB 无法读写
  • DOM 和 Js对象无法获得
  • AJAX请求不能发送

可以跨域的标签：

在浏览器中, <script> 、<img>、<iframe>、<link>等标签都可以跨域加载,而不受浏览器的同源策略的限制, 这些带src属性的标签每次加载的时候,实际上都是浏览器发起一次GET请求, 不同于普通请求(XMLHTTPRequest)的是，通过src属性加载的资源,浏览器限制了JavaScript的权限，使其不能读写src加载返回的内容

（2）案例证明

服务端：

// 1.引入express
const express = require('express')
// 2.创建初始对象
const app = express()
// 3.路由机制 get
app.get('/server', (request, response) => {
    // 发送文件 __dirname：绝对路径 D:\ajax\跨域\1.同源策略
    response.sendFile(__dirname + '/index.html')
})

// /data
app.get('/data', (request, response) => {
    response.send('数据来了数据来了')
})

// 4.端口监听事件
app.listen(8000, () => {
    console.log('服务器8000端口正在运行中...')
})

        发送文件：sendFile(__dirname+'文件名') 

index.html文件 :

    <!-- 引入axios -->
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>

<body>
    <h1>同源策略</h1>
    <button>点击发送请求</button>
    <script>
        // 点击按钮发送请求
        const btn = document.querySelector('button')
        // 用axios函数发送ajax
        btn.addEventListener('click', function () {
            // 因为同源，故url路径可省略简写为/data即可
            axios.get('/data', {}).then(response => {
                console.log(response.data)
            })
        })
    </script>
</body>

index.html和服务端server.js同源，点击按钮发送请求正确

 若将index.html以liveServer形式打开，因为liveServer用的是5500端口，则与服务端不同源

 报错，不能发送ajax请求(maybe)

2.解决跨域的方案

（1）JSONP

原理：动态创建script标签，src属性指向没有跨域限制；指向一个接口，接口返回的格式一定是函数表达式(数据)

jsonp的使用：

1、动态创建script标签

        const script = document.createElement('script')

2、添加script路径

        script.src = 'server.js的路径'

3、将script标签插入到目标位置

        document.body.appendChild(script

jsonp的缺点

1、只支持get请求，不支持post等请求

2、多次点击后页面会存在大量废弃script标签，使用onload事件在script标签作用后立即删除

案例分析

输入用户名，若已经存在则输入框边框变为红色，提示用户名已存在

<body>
    <input type="text">
    <p></p>
    <script>
        // 判断输入的内容在服务端内是否存在，不存在则输入框变为红色边框，文字提示重复
        const ipt = document.querySelector('input')
        const p = document.querySelector('p')
        // 失去焦点事件 用change/blur
        ipt.addEventListener('change', function () {
            // 动态创建script标签
            const script = document.createElement('script')
            // 写src
            script.src = 'http://127.0.0.1:8000/check-uname'
            // 将标签写到p标签后
            document.body.appendChild(script)
        })

        // 声明handle函数
        function handle(data) {
            // 如果值相等表明重复
            if (data.uname === ipt.value) {
                p.innerHTML = data.msg
                p.style.color = 'red'
                ipt.style.border = '2px solid red'
            } else {
                p.innerHTML = ''
                ipt.style.border = '1px solid #000'
            }
        }
    </script>
</body>

服务端：

// 1.引入express
const express = require('express')
// 2.创建初始对象
const app = express()
// 3.路由机制 get
app.get('/check-uname', (request, response) => {
    const data = {
        uname: 'csq',
        age: 18,
        msg: '输入用户名已存在！'
    }
    // 将对象转换为字符串
    let str = JSON.stringify(data)
    // 调用handle函数
    response.send(`handle(${str})`)
})

// 4.端口监听事件
app.listen(8000, () => {
    console.log('服务器8000端口正在运行中...')
})

 弊端：

多次进行get请求后页面会留存大量script标签，造成大量冗余

 解决方法：用onload事件，即用即删，script标签完全加载完毕后触发

// 失去焦点事件 用change/blur
ipt.addEventListener('change', function () {
    // 1.动态创建script标签
    const script = document.createElement('script')
    // 2.写src
    script.src = 'http://127.0.0.1:8000/check-uname'
    // 3.将标签写到p标签后
    document.body.appendChild(script)

    // 多次请求get事件后，页面留存大量script标签
    // 4.用onload事件，即用即删
    script.addEventListener('load', function () {
        script.remove()
    }) 
})

此时script标签已删除 

（2）CORS

跨域资源共享是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源

CORS工作原理：

通过设置一个响应头来告诉浏览器该请求允许跨域，浏览器接收到该响应后就会响应对方 

允许跨域的响应头

response.setHeader('Access-Control-Allow-Origin','*') 

更多响应头见下方链接

跨源资源共享（CORS） - HTTP | MDN

（三）小感悟

终于算是肤浅的学完了ajax？还有很多细节不熟悉，等以后遇到了具体的再补吧，学前端进度还不到30%...继续加油！！！ 

DogEgg_001
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax跨域请求WebService.asmx
08-22
【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景，主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的...
比较常用的ajax日常使用示例
08-02
由于同源策略限制，Ajax无法直接发起跨域请求，而Jsonp通过动态创建`<script>`标签来绕过这一限制。一个简单的Jsonp实现： ```javascript var script = document.createElement('script'); script.src = '...
fetch请求跨域问题
qq_43574083的博客
03-28 1125
fetch是比较基础的API，很多参数需要自家设置。在进行跨域POST请求时，有以下一个重要参数： method 指定请求方式，可选值：GET | POST | PUT | DELETE | OPTIONS。默认值：GET。 credentials 指定在发送cookies的情况，可选值：omit | same-origin | include。 默认值：same-origin。 omit: ...
跨域问题的解决
Az201706的博客
09-24 4604
跨域问题
fetch请求的基本用法
qq_37822457的博客
05-27 446
【代码】fetch请求的基本用法。
AJAX网络请求 —— Fetch：发送跨域请求（三）
秋天，黄叶坠地，凉风有信。
03-17 5140
文章目录Fetch：跨源请求为什么需要 CORS？跨源请求简史)使用表单使用 script简单的请求用于简单请求的 CORSResponse header“非简单”请求Step 1 预检请求（preflight request）Step 2 预检响应（preflight response）Step 3 实际请求（actual request）Step 4 实际响应（actual response）凭据（Credentials）总结 Fetch：跨源请求 如果我们向另一个网站发送 fetch 请求，则该请求可
前端请求跨域的两种解决方案
爪蛙毁一生的博客
03-22 695
在 express 服务器启动代码中加入。fetch 代码改为。
深入了解JavaScript中的fetch方法
前端卷王小白的博客
05-21 1万+
fetch方法,网络请求,跨域问题解决,超值请求,错误请求
ajax跨越请求
03-27
在实际项目中，前端开发者通常会使用库或框架（如jQuery、axios、fetch等）来处理Ajax请求，这些库通常已经内置了处理跨域的逻辑。在后端，开发人员需要配置服务器响应头以支持CORS，例如在Node.js中使用`cors`...
axios-0.15.2.zip
最新发布
06-10
3. **跨域请求**：在浏览器环境中，Axios 支持CORS（跨源资源共享），允许向不同源的服务器发送Ajax请求，扩大了Web应用的可访问范围。 4. **数据转换**：Axios 可以自动将`application/json`格式的数据转化为JSON...
浅谈在fetch方法中添加header后遇到的预检请求问题
08-29
下面小编就为大家带来一篇浅谈在fetch方法中添加header后遇到的预检请求问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
14ajax课程_AJAX基础_
10-02
由于同源策略的限制，AJAX请求通常只能访问同源（协议、域名、端口相同）的资源。为实现跨域，可以使用JSONP或者CORS（跨源资源共享）技术。 ### 9. jQuery与AJAX库 为了简化AJAX操作，开发者通常会使用jQuery或...
fetch请求设置请求头错误导致无法跨域
蓝枫秋千的踩坑记录
12-06 7779
前言 项目中遇到了一个问题，如下，看起来像是跨域问题，但是实际上在服务端设置了Access-Control-Allow-Origin *，并且之前是一直用的好好的，但是这次重新封装了一下请求，就不行了。 Access to fetch at '***' from origin '***' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-C
【JS】1857- 你知道 XHR 和 Fetch 的区别吗？
pingan8787
11-06 139
现如今，网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR和Fetch API是两种最常见的方法，用于从 Web 服务器获取数据。XHR是一种传统的数据请求方式，而Fetch API则代表了现代 Web 开发的新兴标准。接下来，我们将一同深入学习它们的使用方法和适用场景。XMLHttpRequestXMLHttpRequest[1]，通常简称为 X...
关于fetch 跨域的问题
热门推荐
u010783527的博客
06-30 1万+
最近在拿react+dva-cli+antd做个项目练手，搭建完项目后发现在做请求的时候走的是fetch，用的时候在跨域请求的时候出现了不少问题。在网上查了一下解决办法，提供了一个在options mods:'no-cors'配置 发现确实可以请求成功了，但是会出现下面的情况 请求成功但是看不到返回数据，查了一下是设置no-cors本身的问题，他返回的response type是opaq
前端异步请求并解决跨域问题（Ajax+axios框架）、后端响应多个数据（JSON）
weixin_63541561的博客
05-31 2274
1.同步请求：发送一个请求，回应请求，回应的内容会覆盖浏览器中的内容，这样会打断前端其他的正常操作。 2.异步请求： 不同步，可以使用js中提供的对象，向后发送请求，服务器响应的内容会被js对象接收，在js中接收到的内容，局部更新网页，就不会刷新页面。 Ajax：无刷新状态更新页面，并且实现异步提交，提升用户体验。利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求。
fetch与axios的区别
wyhcyzai99的博客
08-13 1862
fecth与xios的定义 fecth是浏览器提供的一个api，而axios是社区封装的一个组件 fecth是一个低底层的api，是W3C的正式标准，使用起来不怎么舒服，所以需要封装，以便使用。 fetch和axios的区别 fetch是规范底层api axios是封装 fetch和axios的优缺点 ...
react跨域解决方案和fetch请求知识
m0_60322879的博客
05-23 1661
1
使用axios 和proxy发送一个跨域请求
04-27
好的，我可以为您提供代码示例。首先需要安装axios： ```bash npm install axios ``` 然后在代码中引入axios： ```javascript import axios from 'axios'; ``` 接下来，我们需要设置proxy。在项目的根目录下，创建一个名为`vue.config.js`的文件，如果是React项目则创建`setupProxy.js`文件。在文件中添加以下内容： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 目标服务器地址 changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '' // 重写地址 } } } } }; ``` 这里我们设置了一个代理，将以`/api`开头的请求代理到`http://localhost:3000`这个地址上。 最后，我们可以使用axios发送请求： ```javascript axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 这里我们发送了一个GET请求，请求地址为`/api/data`，axios会自动将该请求代理到`http://localhost:3000/data`上。如果请求成功，会在控制台中输出返回的数据；如果请求失败，会输出错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值