【Ajax】笔记-设置CORS响应头实现跨域

这篇具有很好参考价值的文章主要介绍了【Ajax】笔记-设置CORS响应头实现跨域。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CORS

CORS

CORS是什么?

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源
【Ajax】笔记-设置CORS响应头实现跨域,# Ajax,ajax,笔记,前端,CROS,跨域

CORS怎么工作的?

CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。

CORS的使用

主要是服务端的设置:

roter.get("/testAJAX",function(req,res){
	//通过 res 来设置响应头,来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应")
});

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        const result = document.getElementById("result");

        btn.onclick = function(){
            //1. 创建对象
            const x = new XMLHttpRequest();
            //2. 初始化设置
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            //3. 发送
            x.send();
            //4. 绑定事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        //输出响应体
                        console.log(x.response);
                        result.innerHTML=x.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

服务

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

测试

【Ajax】笔记-设置CORS响应头实现跨域,# Ajax,ajax,笔记,前端,CROS,跨域文章来源地址https://www.toymoban.com/news/detail-624079.html

到了这里,关于【Ajax】笔记-设置CORS响应头实现跨域的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 异步回调中axios,ajax,promise,cors详解区分

    Ajax、Promise和Axios之间的关系是,它们都是用于在Web应用程序中发送异步HTTP请求的JavaScript库,但它们有不同的实现方式和用法。 Ajax是一种旧的技术,使用XMLHttpRequest对象来向服务器发送异步请求并获取响应。它通常需要手动编写回调函数来处理响应,并且容易出现回调地狱问

    2024年02月13日
    浏览(56)
  • 探索 AJAX 技术:实现动态数据交互的前端利器

    简介: AJAX(Asynchronous JavaScript and XML)技术在 Web 前端开发中扮演着重要的角色,它通过异步通信和动态内容更新,为用户带来更好的交互体验。本篇笔记将详细探索 AJAX 技术,并通过生动的代码演示来展示其在实现动态数据交互方面的优势。 1. 异步通信 异步通信是一种在

    2024年02月14日
    浏览(45)
  • Ajax同源策略及跨域问题

    其他AJAX知识 Ajax-概念、Http协议、Ajax请求及其常见问题——点击此处 AJAX请求的不同发送方式——点击此处 同源策略(Same-Origin Policy)是一种安全策略,是指: 协议 、 域名 、 端口 ,只有以上三点都一样的情况下才允许访问相同的cookie、localStorage和发送Ajax请求,以上一点不

    2024年02月14日
    浏览(39)
  • AJAX 前端开发利器:实现网页动态更新的核心技术

    AJAX是开发者的梦想,因为你可以: 在不重新加载页面的情况下更新网页 在页面加载后请求来自服务器的数据 在页面加载后接收来自服务器的数据 在后台向服务器发送数据 HTML页面 HTML页面包含一个 div 部分和一个 button div 部分用于显示来自服务器的信息 button 调用一个函数(

    2024年03月22日
    浏览(52)
  • 【Ajax】笔记-jsonp实现原理

    JSONP是什么 JSONP(JSON With Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来的,只支持get请求。 JSONP 怎么工作的? 在网页有一些标签天生具有跨域能力,比如:img link iframe script. JSONP就是利用Script标签的跨域能力来发送请求的 JSONP的使用 动态的创建一

    2024年02月15日
    浏览(30)
  • Ajax--》请求操作以及跨域相关讲解

    目录 jQuery中的Ajax 请求超时与网络异常处理 取消请求 Ajax请求—fetch() 跨域 jQuery中的Ajax 在jQuery中应该如何发送Ajax请求呢?看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。 要想使用jQuery框架,肯定是需要引进jQuery资源的,有两种方式,一种是将资源下载到本地,另一

    2024年01月16日
    浏览(46)
  • [AJAX]原生AJAX——服务端如何发出JSON格式响应,客户端如何处理接收JSON格式响应

    服务端代码: 主要代码 // 第一步:设置发给客户端的JSON格式数据     var data={         code:200,         msg:\\\"成功\\\"     }     // 第二步:由于response.send()只能发送字符串,所以要把JSON转换成字符串     data = JSON.stringify(data)     // 第三步:发送数据     response.send(data); 根据上

    2024年02月13日
    浏览(55)
  • Ajax XHR响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。 如果来自服务器的响应并非 XML,请使用 responseText 属性。 responseText 属性返回字符串形式的响应,因此

    2023年04月27日
    浏览(38)
  • Ajax的请求响应

    Ajax的全称是Asynchronous JavaScript and XML,即异步的JavaScript和XML(传输储存数据)。它是一种在不重新加载整个页面的情况下更新部分页面的技术。 Ajax的原理 1.用户通过页面上的操作(如点击按钮)触发JavaScript函数的执行; 2.JavaScript函数通过XMLHttpRequest对象向服务器发送请求;

    2024年04月27日
    浏览(28)
  • Ajax请求跨域问题及其解决方案

            我们的传统请求,比如说超链接、form表单,js代码以及直接在浏览器地址栏上写请求地址都不存在跨域问题,能够从一个网站访问另外一个网站,但是我们的Ajax请求会存在跨域问题,其主要是为了解决跨域访问带来的安全隐患。因为浏览器中有一个内置对象XMLH

    2024年02月06日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包