Ajax解决跨域之设置CORS响应头实现跨域案例详解

1.设置CORS响应头实现跨域

跨源资源共享（CORS）

1.1 什么是CORS

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源

1.2 CORS 怎么工作的？

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

1.3 CORS 的使用？

ajaxDemo.html

<!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');

        btn.onclick = function () {
            //1. 创建对象
            const x = new XMLHttpRequest();
            //2. 初始化设置
            x.open("GET", "http://127.0.0.1:8080/cors-server");
            //3. 发送
            x.send();
            //4. 绑定事件
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        document.getElementById('result').innerText = x.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

server.js

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");// 允许请求所有跨域 *
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 允许指定请求跨域
    // response.setHeader("Access-Control-Allow-Headers", '*');// 允许自定义请求头标签
    // response.setHeader("Access-Control-Allow-Method", '*');// 允许所有的请求跨域 *
    // response.setHeader("Access-Control-Allow-Method", 'get');// 允许get请求跨域

    response.send('hello CORS');
});

//4. 监听端口启动服务
app.listen(8080, () => {
    console.log("服务已经启动, 8080 端口监听中....");
});

启动服务 nodemon server.js

运行结果：

到此这篇关于Ajax解决跨域之设置CORS响应头实现跨域案例详解的文章就介绍到这了,更多相关Ajax解决跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何利用AJAX获取Django后端数据详解

    使用Django服务网页时,只要用户执行导致页面更改的操作,即使该更改仅影响页面的一小部分,它都会将完整的HTML模板传递给浏览器.但是如果我们只想更新页面的一部分,则不必完全重新渲染页面-这时候就要用到AJAX了. 使用AJAX获取Django后端数据插图 AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法.现代JavaScript包含fetch API,该API为我们提供了一种纯JavaScript方式来发送AJAX请求. 让我们看一下如何

  • 三级联动省市ajax的代码

    三级联动省市ajax的代码

    目录 创建数据库 首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法 Province类 City类 连接数据库 创建 接口 ProvinceInfoDao 实例化对象ProvinceInfoDaoImpl 以及CityInfoDao接口 CityInfoDaoImpl实例化对象 FindProvinceServlet FindCityPidServlet 最后是jsp页面 总结 我只写到了市剩下的区可以复制粘贴的很简单 所需要的jar包

  • jquery+Ajax实现简单分页条效果

    jquery+Ajax实现简单分页条效果

    本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码,供大家参考,具体内容如下 一.如果是jsp页面的话,可以用EL表达式和JSTL标签制作一个分页条,没有什么难度.用EL表达式和JSTL标签实现的缺点就是无法实现异步效果,整个页面是重新刷新了一遍的. 二.如果是普通的html页面,当然是无法使用EL表达式和JSTL标签的,这时只能通过异步Ajax的方式去实现.当然了,JSP页面两种方式都是可以使用的. 三.分页条,这里我是用Ajax和Jquery去做的.实现起来比较繁琐,代码特别

  • JavaScript 解决ajax中parsererror错误案例详解

    解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的ajax请求 $.ajax({ type:'get', url:"{php echo $this->createWebUrl('ajax',array('ac'=>'cunByXiangId'))}", data:{id:id}, dataType:'json',//这个地方是

  • JSON,AJAX,Maven入门基础

    JSON,AJAX,Maven入门基础

    目录 一,JSON –1,概述 –2,测试 二,AJAX –1,概述 –2,语法 –3,测试 三,Maven –1,概述 –2,核心组件 –3,使用步骤 总结 一,JSON –1,概述 JSON是一种轻量级的数据交换格式. 指定了 浏览器 和 服务器 之间数据传输的格式. –2,测试 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JSON的语法&l

  • Ajax 的初步实现(使用vscode+node.js+express框架)

    Ajax 的初步实现(使用vscode+node.js+express框架)

    需求: 点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新 一. 服务端的前期准备 安装node.js https://nodejs.org/en/download/ 检验是否安装成功 : 在命令行输入 node -v 按下enter 键之后出现 版本号就表明安装成功 (图如下) 使用 vscode安装express (前提是你已经成功安装了node.js) 在 vscode 里面新建一个文件夹 文件下面包含俩个文件 一个是你的前端页面代码:.ht

  • Ajax登录验证实现代码

    目录 package cn.hp.util; import java.sql.*; public class JDBCUtils { static Connection connection = null ; static Statement statement = null ; static PreparedStatement preparedStatement = null ; static ResultSet resultSet = null ; static{ try { Class.f

  • Ajax实现省市区三级联动

    Ajax实现省市区三级联动

    目录 需要的jar包: 数据库代码: 省: 市: 区: 页面展示代码: DBHelper类: 总结 需要的jar包: 数据库代码: create database school character set utf8; use school; CREATE table provice ( pid INT PRIMARY KEY auto_increment, pname varchar(20) ); INSERT into provice VALUES (null,"河南省"); INS

  • Ajax解决跨域之设置CORS响应头实现跨域案例详解

    Ajax解决跨域之设置CORS响应头实现跨域案例详解

    1.设置CORS响应头实现跨域 跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享.CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求.跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源 1.2 CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览

  • jQuery 跨域访问解决原理案例详解

    浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

  • ASP.NET session.timeout设置案例详解

    session.timeout 方法一: asp.net Session的默认时间设置是20分钟,即超过20分钟后,服务器会自动放弃Session信息. 当我们在asp.net程序中打开webconfig的时候,可以看到一段如下的代码:Asp.net程序代码: sessionState节点放在<system.web>节点下,形式如下: configuration 元素(常规设置架构) system.web 元素(ASP.NET 设置架构) sessionState 元素(ASP.NET 设置架

  • Vue.js3.2响应式部分的优化升级详解

    Vue.js3.2响应式部分的优化升级详解

    目录 背景 响应式实现原理 依赖收集 派发通知 副作用函数 响应式实现的优化 依赖收集的优化 响应式 API 的优化 trackOpBit 的设计 总结 背景 Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了 Vue 3 了.如今,Vue.js 3.2 已经正式发布,而这次 minor 版本的升级主要体现在源码层级的优化,对于用户的使用层面来说其实变化并不大.其中一个吸引我的点是提升了响应式的性能: More efficient ref implementation (~

  • 通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)

    通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)

    本次小飞鱼开发的程序主要解决某下属公司在人力系统中增加账号不能马上审批完毕的问题,可以通过这个流程审批后由插件在后台判断自动增加OA账号,增加机制与hr与OA系统同步相同. 只进行增加操作,没有修改.删除的操作.原有已经进行了两个系统的数据自动同步开发,因此这次的开发属于一个补充的内容,仅在此提供一个应用的思路和开发过程的探讨. 前端发起人申请时填写hr系统中已经分配的工号,即可对应查询出其他相关数据.为了避免查出数据后对工号修改,增加一个确认工号输入框.其他信息由Ajax自动获取为只读形式.这

  • 基于layui框架响应式布局的一些使用详解

    写在前面的 因为公司的需要,这几天学习了layui框架,稍微有一些心得.介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍. 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui的响应式使用十分简单,虽然官网写了很多很详细,但某种意义上增加了新手学习的难度和劝退的可能.但其实总结下来如何使用响应式布局就几个步骤: 第一,在第一个div设置一个布局类 ,通常我只使用两个类,分别是:layui-contain

  • Ajax responseText解析json数据案例详解

    解决ajax处理服务器端返回结果responseText中是JSON的数据. 第一,json格式的文件内容如下: { "city":"ShangHai", "telephone":"123456789" } 第二,服务器端返回的json数据就是上述的内容在responseText中,现在要取出来,方法有两种: 方法1: var json=JSON.parse(request.responseText); alert(json.

  • Nginx缓存设置案例详解

    在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置.在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma. nginx: location ~ .*\.(css|js|swf|php|htm|html )$ { add_header Cache-Control no-store;add_header Pragma no-cac

  • Ajax 文件上传进度监听之upload.onprogress案例详解

    $.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compati

随机推荐