关于 CORS、跨域、案例演示

已于 2022-04-02 12:32:35 修改
阅读量1.1k 收藏 3
点赞数
分类专栏： 前端基础 文章标签： Hosts Jest 自动化测试
于 2020-12-04 09:00:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/110621935
版权

关于跨域 和 CORS

CORS 主要用于解决跨域问题。

跨域就是浏览器的浏览器的同源策略（协议+域名+端口）。

网上有太多的总结介绍文章，例如：

跨域解决方案

现在常用的跨域解决方案主要有两个：

  • 代理 Proxy
    • 开发环境需要前端自己配置 web 服务器
    • 生产环境如果不同源，需要运维人员配置
  • CORS
    • 缺点：低版本浏览器不支持
    • 优点：前端几乎不用做任何配置（后端负责配置）

下面通过案例演示

实现跨行

初始化客户端和服务端

创建文件夹 cors-demo，内部结构如下：

在这里插入图片描述

  • client - 客户端页面
  • server - 开启一个web服务器

编写 client/index.html，使用 axios 进行跨域 HTTP 请求：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="https://unpkg.com/axios"></script>
    <script>
      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts'
      }).then(res => {
        console.log(res)
      })
    </script>
  </body>
</html>

在 server 目录下使用 express 开启一个web服务器：

cd ./server
npm init -y
npm install express

编写 server/app.js：

const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  res.send('get posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

分别运行

  • server：使用 node 运行 server/app.js 开启 web 服务。

    • 建议使用 nodemon server/app.js 运行，减少手动重启的操作

  • client：开启一个 web 服务，访问 html 页面

    • 方法1：使用 npm 工具 serve 开启

      npm install -g serve
cd ../client
serve .

    • 方法2：使用 vscode 插件 Live Server 开启，右键 Open with Live Server

访问 index.html，页面报错 No 'Access-Control-Allow-Origin' header is present on the requested resource.。

一般报错提示 Access-Control-Allow-Origin 就肯定和跨域有关。

开启 CORS

CORS 其实就是规定的一个 客户端和服务端共同遵守 的HTTP 协议。

只需服务端设置 Access-Control-Allow-Origin：

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 与 * 效果差不多
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 发送响应数据
  res.send('get posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

重启服务端（nodemon会自动重启）。

客户端在请求时发送的请求头包含一个字段 Origin，表示请求的源，一般是客户端主机名。

如果 Access-Control-Allow-Origin 包含这个主机名，则请求成功，否则请求失败。

服务端发送的响应头中也会包含 Access-Control-Allow-Origin。

Access-Control-Allow-Origin 的值只能设置为 * 或 一个主机名，不能设置多个。

在这里插入图片描述

在这里插入图片描述

发送 Cookie

CORS 请求默认不发送 Cookie，需要客户端和服务端进行设置：

  • 客户端：在 Ajax 请求时打开 withCredentials
  • 服务端：设置响应头 Access-Control-Allow-Credentials 为 true，表示允许发送 Cookie。
    • 如果服务端不允许发送，而客户端发送了 Cookie，请求就会报错

修改 client/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="https://unpkg.com/axios"></script>
    <script src="https://unpkg.com/js-cookie"></script>
    <script>
      // 设置
      Cookies.set('name', 'jack')
      Cookies.set('age', '18')

      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        // 打开withCredentials，请求携带 Cookie
        withCredentials: true
      }).then(res => {
        console.log(res)
      })
    </script>
  </body>
</html>

修改 server/app.js：

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 发送响应数据
  res.send('get posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

在这里插入图片描述

在这里插入图片描述

Access-Control-Allow-Credentials 只能设置为 true，如果不要浏览器发送 Cookie，不设置该字段即可。

客户端获取自定义响应头

CORS请求时，默认 Ajax 请求只能获取响应头的 6 个基本字段。如果想获取其他字段，需要服务端指定。

添加自定义响应头：

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 设置自定义响应头
  res.setHeader('token', `t_${new Date().getTime()}`)

  // 发送响应数据
  res.send('get posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

查看请求结果：

响应头确认已添加

在这里插入图片描述

但是请求结果未获取到该字段：

在这里插入图片描述

在服务端设置 Access-Control-Expose-Headers 指定客户端可以获取的其他字段：

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 设置自定义响应头
  res.setHeader('token', `t_${new Date().getTime()}`)

  // 添加客户端可以获取的其他字段，多个用逗号 `,` 隔开
  res.setHeader('Access-Control-Expose-Headers', 'token')

  // 发送响应数据
  res.send('get posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

响应头增加返回了 Access-Control-Expose-Headers：

在这里插入图片描述

Ajax 请求成功获取该字段：

在这里插入图片描述

添加的响应头会正常展示在响应信息中，但是如果前后端没有进行相应的设置，前端也获取不到，了解这一点，可以避免项目中后端把锅甩给前端。

CORS 响应头总结

  • Access-Control-Allow-Origin：开启 CORS
  • Access-Control-Allow-Credentials： 允许浏览器发送 Cookie
  • Access-Control-Expose-Headers： 允许Ajax请求获取其他的响应头字段

简单请求和非简单请求

非简单请求就是被认为对服务器有特殊要求的请求。

就过程而言，两者的主要区别就是，非简单请求会比简单请求多发送一次预检请求（preflight）。

浏览器先发送预检请求，询问服务器这个请求是否可以通过。得到答复后才会发送正式请求。

满足条件

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

（2）HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded（表单提交）、multipart/form-data（提交文件）、text/plain（普通文本）

凡是不同时满足上面两个条件，就属于非简单请求。

项目中常见的非简单请求就是 Content-Type 为 application/json 的请求。

可以简单理解为凡是会产生副作用的请求，都是复杂请求。
POST 修改资源理论上每次请求的结果都应该是一样的，不过这只是一种规范并没有强制开发者去实现，很多 POST 请求实现都会产生不同的结果

预检请求（preflight）

预检请求的目的主要是为了避免资源浪费。

它是一个 HTTP 查询请求（请求方法是 OPTIONS），只会发送询问所需的信息，不会发送请求体。

当服务端确认允许请求后，发送正式请求的时候，才会发送请求体。

发送一个非简单请求

修改 client/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="https://unpkg.com/axios"></script>
    <script src="https://unpkg.com/js-cookie"></script>
    <script>
      // 设置
      Cookies.set('name', 'jack')
      Cookies.set('age', '18')

      // axios({
      //   method: 'GET',
      //   url: 'http://localhost:3000/posts',
      //   // 打开withCredentials，请求携带 Cookie
      //   // withCredentials: true
      // }).then(res => {
      //   console.log(res)
      // })

      axios({
        method: 'POST',
        url: 'http://localhost:3000/posts',
        // 请求体，axios 默认 Content-Type: application/json
        data: {
          foo: 'bar'
        }
      }).then(res => {
        console.log(res)
      })
    </script>
  </body>
</html>

服务端添加 POST 接口：

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 设置自定义响应头
  res.setHeader('token', `t_${new Date().getTime()}`)

  // 添加客户端可以获取的其他字段，多个用逗号 `,` 隔开
  res.setHeader('Access-Control-Expose-Headers', 'token')

  // 发送响应数据
  res.send('get posts')
})

// 正式请求
app.post('/posts', (req, res) => {
  // 开启 CORS
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 判断客户端请求是否发送过来
  console.log('接收到了客户端请求')

  res.send('post posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

刷新页面查看请求记录：

  • 一共发送了两次请求
    • 先发送了预检请求 OPTIONS
    • 然后是 POST 请求，但是失败了，根本并没有发送到服务端
  • 控制台报错：预检请求（preflight）没有未允许跨域请求
    • Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在这里插入图片描述

在这里插入图片描述

给预检请求开启 CORS

配置预检请求，并开启 CORS

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 设置自定义响应头
  res.setHeader('token', `t_${new Date().getTime()}`)

  // 添加客户端可以获取的其他字段，多个用逗号 `,` 隔开
  res.setHeader('Access-Control-Expose-Headers', 'token')

  // 发送响应数据
  res.send('get posts')
})

// 预检请求
app.options('/posts', (req, res) => {
  // 开启 CORS
  res.setHeader('Access-Control-Allow-Origin', '*')

  res.send('options posts')
})

// 正式请求
app.post('/posts', (req, res) => {
  // 开启 CORS
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 判断客户端请求是否发送过来
  console.log('接收到了客户端请求')

  // 结束响应，否则会一致挂起
  res.send('post posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

刷新页面：

  • 预检请求成功，正式请求仍然未能发送
  • 控制台报错：请求头字段 content-type 不在预检请求（preflight）响应字段 Access-Control-Allow-Headers 的允许范围内。
    • Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

预检请求的请求和响应

预检请求的头信息会包含两个特殊字段：

  • Access-Control-Request-Method：当前CORS请求的请求方法
  • Access-Control-Request-Headers：当前CORS请求额外发送的请求头字段

服务端收到预检请求后会检查以下3个内容：

  • Origin 主机名是否允许
  • Access-Control-Request-Method 请求方法是否允许
  • Access-Control-Request-Headers 请求头字段是否允许

它们分别对应服务端设置的以下字段，并包含在响应信息中发送给客户端：

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Method
  • Access-Control-Allow-Headers

设置预检请求的响应

// server/app.js
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.get('/posts', (req, res) => {
  // 设置 CORS
  // 允许任意主机名的客户端跨域请求
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定主机名的客户端跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000')

  // 允许发送 Cookie
  res.setHeader('Access-Control-Allow-Credentials', true)

  // 设置自定义响应头
  res.setHeader('token', `t_${new Date().getTime()}`)

  // 添加客户端可以获取的其他字段，多个用逗号 `,` 隔开
  res.setHeader('Access-Control-Expose-Headers', 'token')

  // 发送响应数据
  res.send('get posts')
})

// 预检请求
app.options('/posts', (req, res) => {
  // 开启 CORS
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 设置允许跨域的请求方法，多个以逗号`,`隔开
  res.setHeader('Access-Control-Allow-Method', 'POST, DELETE, PUT')
  // 设置允许跨域发送的请求头字段，多个以逗号`,`隔开
  res.setHeader('Access-Control-Allow-Headers', 'content-type')

  // 结束响应，否则会一致挂起
  res.send('options posts')
})

// 正式请求
app.post('/posts', (req, res) => {
  // 开启 CORS
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 判断客户端请求是否发送过来
  console.log('接收到了客户端请求')

  res.send('post posts')
})

app.listen(3000, () => {
  console.log('Local: http://localhost:3000')
})

正式请求发送成功。

在这里插入图片描述

在这里插入图片描述

添加请求头

// client/index.html
axios({
  method: 'POST',
  url: 'http://localhost:3000/posts',
  // 请求体，axios 默认 Content-Type: application/json
  data: {
    foo: 'bar'
  },
  headers: {
    Authorization: 'xxxxx'
  }
}).then(res => {
  console.log(res)
})


// server/app.js
res.setHeader('Access-Control-Allow-Headers', 'content-type, Authorization')

非简单请求大致过程

  1. 先发送 OPTIONS 预检请求（preflight），将正式请求的请求方法、请求头字段发送到服务端询问
  2. 服务端收到预检请求，首先检查 Origin，如果允许跨域，则返回一个正常的 HTTP 回应
  3. 服务端还会检查 Access-Control-Request-Methods Access-Control-Request-Headers
    1. 如果检查通过，则会将 Access-Control-Allow-Methods Access-Control-Allow-Headers 包含在响应头中返回
    2. 如果检查不通过，则响应信息中不会包含这两个字段
  4. 浏览器根据预检请求的响应结果，决定是否发送正式请求。
  5. 如果发送正式请求，服务端就会像简单请求一样检查 CORS 相关设置。

开箱即用的 CORS 工具

有一个开箱即用的 cors 工具，可以直接使用：

npm install cors

const express = require('express')
const cors = require('cors')

const app = express()
app.use(cors())
皮蛋很白
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
跨域资源共享 CORS 详解
weixin_34365417的博客
04-19 2230
跨域资源共享 CORS 详解作者：阮一峰日期：2016年4月12日CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介...
http请求options预请求的demo
07-19
回到我们的示例，"http请求options测试"可能包含了一个前端项目和一个后端接口，用于演示如何设置CORS策略以及OPTIONS预请求的工作流程。前端部分可能创建了一个跨域请求，而后端部分则配置了相应的响应头以允许这个...
CORS 跨域访问, 实现跨域的原理, CORS漏洞利用
探测???
11-06 283
看起来似平很明显，但是Access-Control-Allow-Origin中指定的来源只能是受信任的站点。避免在内部网络中使用通配符，当内部浏览器可以访问不受信任的外部域时，仅靠信任网络配置来保护内部资源是不够的。CORS定义了浏览器的行为，绝不能营代服务器端对敏感教据的保护-攻击者可以直接从任何可信来源伪造请求。因此，除了正确配置的CORS之外，Web服务器还应继续对敏感数据应用保护，例如身份验证和会话管理。特别是，使用通配符来表示允许的跨域请求的来源而不进行验证很容易被利用，应该避免。
CORS错误，跨域问题的解决
热门推荐
weixin_57396733的博客
04-29 1万+
当我们遇到CORS错误时，往往是跨域造成的 首先，我们需要了解下两个概念 跨域：不同源的ajax请求 同源：发出请求所在的页面 与 所请求的资源的url，协议相同，域名相同，端口相同 都相同。 同源情况 不同源情况 报CORS错误 解决方案，从npm下cors包，然后在我们的代码中添加这样一段代码 ...
前后端分离遇到CORS问题的解决办法
最新发布
weixin_74923758的博客
05-05 1095
头部（只是其中一个头部）是用来声明哪些源可以访问服务器资源的HTTP响应头部。当服务器收到跨域请求时，需要在响应中包含这个头部，并且指定允许访问资源的来源域名。如果没有正确设置这个头部，那么浏览器会阻止跨域请求，导致出现CORS错误。// 替换为您的前端域名next();});这样子设置可以允许所有来源的跨域请求，并指定允许的请求方法和请求头。但是在实际生产环境中，一定要限制允许的来源，而不是使用通配符 *// 替换为您的前端域名next();});});});
你可能不知道的CORS跨域资源共享
10-17
主要给大家介绍了关于CORS跨域资源共享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用CORS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
CORS-跨域资源共享
Ciao's blog
11-12 351
项目搭建初期常见的跨域问题
html2canvas生成图片案例
02-11
此外，为了处理跨域图片，你需要在服务器端设置CORS策略，允许html2canvas访问。如果图片资源是动态生成的，还可以考虑使用base64编码或者Blob对象来绕过跨域限制。 在实际项目中，你可以根据需求对html2canvas的...
vue-cross-domain.zip
09-14
总的来说，"vue-cross-domain.zip"是一个关于Vue.js跨域通信的实践案例，涵盖了前端Vue应用和后端CORS配置，对于理解和解决实际开发中的跨域问题非常有帮助。通过学习这个项目，开发者可以深入理解跨域的原理，掌握...
项目演示：springboot整合shiro.zip
04-04
- **CORS支持**：如果应用需要跨域访问，需配置CORS策略。 - **分布式环境**：在分布式环境中，考虑使用Redis或Memcached存储会话。 7. **总结** SpringBoot整合Shiro能有效提升项目的安全性，实现用户登录、...
presentations:我所有聚会演示文稿的回购
07-06
9. **跨域问题**：CORS、JSONP、代理服务器等解决跨域通信的方法。 10. **安全问题**：XSS、CSRF等Web安全问题的防范措施。 每个文稿可能都会针对这些话题中的某一点进行深入讲解，通过实例和案例来帮助理解。这些...
cross-origin::cyclone: 跨域demo。CORS、JSONP、postMessage、websocket、document.domain、window.name、iframe等示例
05-26
跨域demo集 一个关于跨域的简单demo集合，适合入门学习跨域的。 任何对初学者学习跨域有用的PR都会接受，谢谢！ 原理 用node的web框架express在3000端口和3001端口分别开启一个静态服务器，在两个端口间进行跨域传输数据。 3000端口: 为前端界面，前端静态资源放在3000端口的服务器上 3001端口: 为后端接口服务器 目录 Set Up 运行环境 node.js 全局安装 npm 全局安装 运行步骤 git clone git@github.com:FatDong1/cross-domain cross-domain目录下npm install，下载项目所需的依赖 进入对应的demo目录，①node serverRes.js ②重新开一个终端窗口 ③node serverReq.js 或者在对应的demo目录下，终端窗口输入bash run.bat或者使用脚
cors实现的跨域
06-27
cors跨域
CORS（跨域资源共享）
agoqzwh2474的博客
12-08 103
引用自阮一峰的网络日志：http://www.ruanyifeng.com/blog/2016/04/cors.html 侵删 一、浏览器将CORS请求(通过ajax方式)分成两类： 1.简单请求：需要同时满足以下两大条件 　　1).请求方法为：HEAD、GET、POST之一 　　2).HTTP的请求头信息不超出以下字段：Accept、Accept-Language、Cont...
跨域漏洞丨JSONP和CORS跨域资源共享
dfdhxb995397的博客
05-09 499
进入正文之前，我们先来解决个小问题，什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 跨域常见的两种方式，分别是JSONP和CORS。 今天i春秋以JSONP和CORS这两个知识点，分享一篇比较基础的跨域漏洞知识点，希望能够抛砖引玉。 JSONP跨域 JSONP（JSON with padding），是一种利用...
cors跨域_跨域漏洞丨JSONP和CORS跨域资源共享
weixin_39761880的博客
11-23 189
进入正文之前，我们先来解决个小问题，什么是跨域？跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！跨域常见的两种方式，分别是JSONP和CORS。今天i春秋以JSONP和CORS这两个知识点，分享一篇比较基础的跨域漏洞知识点，希望能够抛砖引玉。JSONP跨域JSONP（JSON with padding），是一种利用HTML中<script>&...
html meta标签使用总结
weixin_33743703的博客
08-07 388
meta标签作用 META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。 PS：便于搜索引擎机器人查找、分类，互联网应用应该要注意。 大网站都是怎么写？ 在了解这个标签之前，我查找了各个主流网站他们的对于Meta的设置，如下： 京东首页的Meta设置： &lt;meta...
分布式11_-模拟网站跨域问题演示
pyd1040201698的博客
08-19 169
创建itmayiedu-web-a itmayiedu-web-b 两个maven的war项目 =======================a的项目结构和代码============================================= a的项目结构和代码 pom.xml <parent> <groupId>org.spring...
用最简单的例子演示如何使用js或者$.ajax进行跨域请求
lhtzbj12的专栏
12-29 4112
js跨域请求的原理：先在script里声明一个callbackHandler函数，往header里添加一个script标签，script的src属性值为远端的请求地址，并传入刚才声明的函数名称（如：callbackHandler）， 远端服务器收到请求后，返回结果拼装的格式为 callbackHandler({“name”:”zhangsan”}),实际上就是一段javascript代码，调用刚才...
cors跨域漏洞概述
10-11
CORS（跨来源资源共享）是一个用于浏览器和服务器之间通信的机制，它允许服务器在响应中添加一些响应头来明确指示哪些域被允许访问该资源。由于同源策略的限制，浏览器通常不允许从一个源加载另一个源的资源，但如果服务器明确指定了某些域可以访问该资源，浏览器就会允许跨域请求。 然而，CORS 也存在一些安全风险。其中最常见的是 CORS 跨域漏洞，攻击者可以利用这种漏洞来盗取用户数据或执行恶意脚本。攻击者可能会伪造一个跨域请求，然后向服务器发送一个 HTTP 请求，服务器在响应中添加了允许其它域名访问该资源的头部，攻击者就能够获取到服务器返回的数据。 为了防止 CORS 跨域漏洞，服务器需要对来自非法域名的跨域请求进行严格检查，并且不要将敏感信息包含在跨域响应中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值