AJAX（三）跨域

最新推荐文章于 2024-05-06 14:16:34 发布
VIP文章 最新推荐文章于 2024-05-06 14:16:34 发布
阅读量829 收藏 21
点赞数 14
分类专栏： AJAX 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59448049/article/details/135241111
版权

一、同源策略

同源策略最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。（同一个来源）

违背同源策略就是跨域。

AJAX发送请求时是默认要遵循同源策略的，不是同源策略，没法直接发AJAX。

get.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>首页</title>
    </head>
    <body>
    <h1>沃尔</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn =document.querySelector('button');
        btn.onclick=function(){
            const x=new XMLHttpRequest();
            //这里因为是满足同源策略的，所以url可以简写
            x.open('GET','/data');
            //发送
            x.send();
            x.onreadystatechange=function(){
                if(x.readyState == 4){
                    if(x.status>=200 && x.status<300){
                        console.log(x.response);
                    }
                }
            }

        }
    </script>
    </body>
</html>

app.js: 

const express=require('express');

const app=express();

app.get('/home',(request,response)=>{
   //响应一个页面
     response.sendFile(__dirname+'/index.html');
});

app.get('/data',(request,response)=>{
     response.send('用户数据');
});


app.listen(9000,()=>{
    console.log("服务已经启动...");
});

我们在网站中输入：http://127.0.0.1:9000/home:

之后再点击点击获取用户数据的按钮：

 数据都是从9000端口来的，所以为同源。同源策略就是来源于同一个服务。

如果点击按钮之后，显示状态码为304，此时删除缓存，重新刷新即可。 

二、跨域的解决方案

1.jsonp的实现原理

（1）JSONP(JSON with Padding),是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

（2）在网页上有一些标签天生具有跨域能力，比如：img link iframe script

         JSONP就是利用script标签的跨域能力来发送请求的。

get.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>axios 发送 AJAX请求</title>
        <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    </head>
    <body>
       <button>GET</button>
       <button>POST</button>
       <button>AJAX</button>
       <script>
       const btns=document.querySelectorAll('button');

       //配置baseURL
       axios.defaults.baseURL='http://127.0.0.1:8000';
       btns[0].onclick=function(){
            //GET请求
            axios.get('/axios-server',{
                //url参数
                params:{
                    id:100,
                    vip:7
                },
                //请求头信息
                headers:{
                    name:'woer',
                    age:33
                }

            }).then(value =>{
                console.log(value);
            }
       )}


       btns[1].onclick=function(){
            //GET请求
            axios.post('/axios-server',{
                  username:'admin',
                  password:'admin'
               },{
                //url
                params:{
                    id:200,
                    vip:9
                },
                //请求头信息
                headers:{
                    name:'yuehanwoer',
                    age:30
                }
               });
            }

            btns[2].onclick=function(){
            axios({
                //请求方法
                method:'POST',
                //url
                url:'/axios-server',
                params:{
                    vip:10,
                    level:30
                },
                //头信息
                headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                 data:{
                    username:'admin',
                    password:'admin'
                 }

            }).then(response=>{
                console.log(response);
                // //响应状态码
                // console.log(response.status);
                // //响应状态字符串
                // console.log(response.statusText);
                // //响应头信息
                // console.log(response.headers);
                // //响应体
                // console.log(response.data);
            })
            }    
        
       </script>
    </body>
</html>

此界面在浏览器中打开我们发现如下所示：

此url为file协议的，而远端的axios.js的协议为https.域名和路径都不一样，但是仍然可以使用。

使用的正是script标签。 

演示如下：

get.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>原理演示</title>
    </head>
    <body>
        
   <script src="app.js"></script>
    </body>
</html>

app.js:

const data ={
    name:'woer'
};

console.log(data);

我们进行访问： 

我们加入script标签如下所示：

原理演示.html: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>原理演示</title>
    </head>
    <body>
        
   <script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script>
    </body>
</html>

我们进行访问： 

此时仍然可以响应，说明是可以跨域的。 

此时我们修改如下：

原理演示.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>原理演示</title>
        <style>
            #result{
                width: 300px;
                height:100px;
                border: solid 1px  #78a;
            }
        </style>
    </head>
    <body>
        <div id="result"></div>
    <script>
     //处理数据
        function handle(data){
           //获取result元素
           const result=document.getElementById('result');
           result.innerHTML=data.name;
     }
   </script>
   <script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script>
    </body>
</html>

app.js: 

const data ={
    name:'yuehanwoer'
};
handle(data);

 查看响应信息：

 此时为app.js资源给返回的结果，对里面内容做一个解析和做一个处理。

app.js:

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  setTimeout(()=>{
     //设置响应体
    response.send('延时响应');
  },3000)
  });
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data={name:'woer'} 
    //设置响应体
      response.send(JSON.stringify(data));
    });
//axios 服务
app.all('/axios-server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  const data={name:'woer'} 
  //设置响应体
    response.send(JSON.stringify(data));
  });
  //fetch 服务
app.all('/fetch-server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  const data={name:'woer'} 
  //设置响应体
  response.send(JSON.stringify(data));
  });
  //jsonp服务
app.all('/jsonp-server',(request,response)=>{
    response.send('console.log("hello jsonp-server")');
  })


//可以接收任意类型的请求
app.all('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  //响应头
   response.setHeader('Access-Control-Allow-Headers','*');
  //设置响应体
  response.send('HELLO AJAX POST')
  
  });

  app.all('/json-server',(request,response)=>{
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
     response.setHeader('Access-Control-Allow-Headers','*');
     //响应一个数据
    //  const data={
    //   name:'woer'
    //  }
     //对对象进行字符串转换
    //  let str=JSON.stringify(data);
    //设置响应体,send方法里面只能接收字符串和Buffer
    response.send('HELLO AJAX POST')
    });
/*function chan(){
  return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...");
    })

/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛
  return console.log("服务已经启动，8000端口监听中...");
}
*/

原理演示.html: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>原理演示</title>
        <style>
            #result{
                width: 300px;
                height:100px;
                border: solid 1px  #78a;
            }
        </style>
    </head>
    <body>
        <div id="result"></div>
    <script>
     //处理数据
        function handle(data){
           //获取result元素
           const result=document.getElementById('result');
           result.innerHTML=data.name;
     }
   </script>
   <!-- <script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script>
最低0.47元/天 解锁文章
一直再追梦
关注
  • 14
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax实现跨域访问的三种方法
10-24
本文给大家介绍了ajax实现跨域访问的3种解决方案，非常的实用，个人比较推荐第三种，小伙伴们可以着重看下。
jquery中ajax处理跨域的三大方式
11-22
由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法： 一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的... ajax本身是不可以跨域的， 通过产生一个script标签来实
原生JS实现ajax与ajax的跨域请求实例
11-27
第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、...
ajax处理跨域请求
01-27
通过jquery的ajax处理跨域请求的DEMO，代码比较简单，仅供学习参考。
ajax跨域讲解
03-06
在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了AJAX跨域的理解，以此记录下来。
前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）
TANKING，开源开发者！
04-30 876
这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API提供了一个在后台发送HTTP请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容。Fetch API是一种新的Web API，提供了一种更强大、更灵活的方式来发起网络请求。它使用Promise对象，简化了对网络请求的处理，并且提供了更友好的API。jQuery是一个流行的JavaScript库，其中包含了简化Ajax调用的方法。通过jQuery的Ajax方法，可以方便地发送各种类型的HTTP请求，并处理响应。Axios。
使用IIS部署Vue项目
weixin_44656422的博客
05-06 268
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
大模型部署之前端页面编写框架，我选streamlit
人工智能
04-30 855
Streamlit是一个开源的Python库，它让数据科学家和开发者可以快速创建和分享美观的，交互式的Web应用。无需拥有前端开发经验，任何人都可以使用Streamlit将数据脚本转换为分享给非技术用户的交互式Web应用。它简化了Web应用的开发流程，让开发者能够专注于数据和业务逻辑，而不是UI代码。Streamlit的设计哲学是简洁高效，它通过减少样板代码的使用，使得创建数据驱动的应用变得前所未有的简单。
5-用户权限控制（前端）
qq_53568730的博客
04-29 323
注意：此时虽然可以实现用户权限控制的菜单显示，但仍可以通过url访问不属于自己权限的页面（这需要通过动态路由技术实现）3.在对应的侧边框组件中获取菜单数据，并通过循环遍历将其显示到页面。1.登录成功后，调用状态管理中对应的设置菜单的方法。2.将后端返回的菜单数据存入Cookie中。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 510
createWs("测试数据", (res) => {
Cisco IOS XE Web UI 权限提升漏洞复现(CVE-2023-20198)
0xSec
05-01 575
当Cisco IOS XE 软件的web UI暴露于互联网或不受信任的网络时，未经身份验证的远程攻击者可以利用该漏洞在受影响的系统上创建具有15级访问权限的帐户。攻击者可以利用该帐户来控制受影响的系统。 利用条件：需要启用HTTP Server或者HTTPS Server。
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 191
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
前端打包过大如何解决？
qq_45050083的博客
04-29 273
前端开发完毕部署到线上是，执行npm run build。当打包过大时，部署到服务端后加载缓慢，如何优化？前端打包成gzip，用new CompressionWebpackPlugin来压缩。服务端nginx设置。我们可以通过执行npm run analyze。可以看到各个包文件大小的区别。当打包过大时，通过压缩gzip的方式，可以看个开始和打包和压缩的大小。
上位机开发PyQt5（三）【布局、单选框和多选框、对话框】
weixin_68429349的博客
04-30 384
一个pyqt窗口中可以有多个控件。所谓布局,指的就是多个控件在窗口中的展示方式水平布局垂直布局网格布局表单布局。
500 Internal Server Error问题
m0_52379411的博客
05-06 61
【代码】500 Internal Server Error问题。
Element-UI库：Web前端开发的强大助力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-03 979
定义与背景Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端UI组件库。它遵循Material Design设计规范，提供了一套丰富的组件和工具，帮助开发者快速构建美观、功能强大的Web应用。Element-UI由饿了么前端团队开发和维护，已经成为国内前端开发者广泛使用的UI库之一。特点与优势（1）丰富的组件库：Element-UI提供了包括按钮、表单、布局、导航、通知等在内的多种常用组件，满足了大部分Web应用的开发需求。
uni框架下的前端小知识
weixin_53908842的博客
04-30 355
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
组件化开发&根组件
最新发布
m0_74462339的博客
05-06 240
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
前端素材库
sytdsqzr的博客
05-01 207
大家好我是苏麟 , 今天推荐一个前端素材库 .这期就到这里 , 下期见!
jquery的ajax处理跨域
01-21
jquery的ajax处理跨域可以通过多种方式来实现。其中一种方法是通过在ajax请求中设置dataType为jsonp，这样可以利用jsonp跨域的特性来进行跨域请求。另外一种方法是在服务端设置响应头部Access-Control-Allow-Origin...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一直再追梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值