• 售前

  • 售后

热门帖子
入门百科

Ajax办理跨域之设置CORS相应头实现跨域案例详解

[复制链接]
宇宙无限 显示全部楼层 发表于 2021-8-14 14:29:25 |阅读模式 打印 上一主题 下一主题
1.设置CORS相应头实现跨域

跨源资源共享(CORS)
1.1 什么是CORS

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中举行处理,支持 get 和 post 哀求。跨域资源共享尺度新增了一组 HTTP 首部字段,答应服务器声明哪些 源站通过欣赏器有权限访问哪些资源
1.2 CORS 怎么工作的?

CORS 是通过设置一个相应头来告诉欣赏器,该哀求答应跨域,欣赏器收到该相应 以后就会对相应放行。
1.3 CORS 的使用?


ajaxDemo.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>CORS</title>
  7.     <style>
  8.         #result {
  9.             width: 200px;
  10.             height: 100px;
  11.             border: solid 1px #90b;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button>发送请求</button>
  17.     <div id="result"></div>
  18.     <script>
  19.         const btn = document.querySelector('button');
  20.         btn.onclick = function () {
  21.             //1. 创建对象
  22.             const x = new XMLHttpRequest();
  23.             //2. 初始化设置
  24.             x.open("GET", "http://127.0.0.1:8080/cors-server");
  25.             //3. 发送
  26.             x.send();
  27.             //4. 绑定事件
  28.             x.onreadystatechange = function () {
  29.                 if (x.readyState === 4) {
  30.                     if (x.status >= 200 && x.status < 300) {
  31.                         document.getElementById('result').innerText = x.response;
  32.                     }
  33.                 }
  34.             }
  35.         }
  36.     </script>
  37. </body>
  38. </html>
复制代码

server.js
  1. //1. 引入express
  2. const express = require('express');
  3. //2. 创建应用对象
  4. const app = express();
  5. //3. 创建路由规则
  6. // request 是对请求报文的封装
  7. // response 是对响应报文的封装
  8. app.all('/cors-server', (request, response)=>{
  9.     //设置响应头
  10.     response.setHeader("Access-Control-Allow-Origin", "*");// 允许请求所有跨域 *
  11.     // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 允许指定请求跨域
  12.     // response.setHeader("Access-Control-Allow-Headers", '*');// 允许自定义请求头标签
  13.     // response.setHeader("Access-Control-Allow-Method", '*');// 允许所有的请求跨域 *
  14.     // response.setHeader("Access-Control-Allow-Method", 'get');// 允许get请求跨域
  15.     response.send('hello CORS');
  16. });
  17. //4. 监听端口启动服务
  18. app.listen(8080, () => {
  19.     console.log("服务已经启动, 8080 端口监听中....");
  20. });
复制代码
  1. 启动服务 nodemon server.js
复制代码
  1. 运行结果:
复制代码

到此这篇关于Ajax解决跨域之设置CORS相应头实现跨域案例详解的文章就介绍到这了,更多相干Ajax解决跨域内容请搜索草根技能分享以前的文章或继续欣赏下面的相干文章希望大家以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作