CORS 跨域请求 - 2

最新推荐文章于 2024-05-20 10:06:29 发布
最新推荐文章于 2024-05-20 10:06:29 发布
阅读量199 收藏
点赞数
分类专栏： HTTP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/90669761
版权

前面一篇，我们通过在服务器端使用了 header 中  'Access-Control-Allow-Origin'  使得跨域请求可以获取数据。那么是不是使用了这个header 就可以使得所有跨域请求都成功呢？否！

下面我们就来讲一下，浏览器跨域请求的一些限制。

首先，我们把之前的html 页面中ajax 请求用fetch 写一下。如下。

<!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-Compatible" content="ie=edge">
    <title>MyHtml</title>
</head>
<body>
    <div>hello world</div>
    <div>don't speak</div>
    <script>
        fetch('http://localhost:8887/', {
            method: 'POST',
            headers: {
                'X-Test-Cors': '123'
            }
        })
    </script>
</body>
</html>

然后，我们启动相同的两个服务器。

在浏览器中输入“http://127.0.0.1:8888/” 会发现如下，报错。错误信息中显示request header 中 x-test-cors 在跨域请求中不被允许。

CORS 预请求

跨域的时候

 - 允许的方法：GET， HEAD，POST。其他方法都是默认不允许的，浏览器会有一个预请求的方式去验证。刚刚说的“GET，HEAD，POST” 方法，则是不需要预请求去验证的。

 - 允许的 Content-Type： “text/plain”，"multipart/form-data"，"application/x-www-form-urlencoded"。其他的Content-Type，也是需要预请求去验证之后才能发送的。

 - 其他限制：

    1. 请求头限制 (https://fetch.spec.whatwg.org/#cors-safelisted-request-header)

    2. XMLHttpRequestUpload 对象均没有注册任何事件监听器 （少用）

    3. 请求中没有使用 ReadableStream 对象 （少用）

我们可以看到，之前网页请求，虽然报错，但在network 中，我们还是可以看到有一个请求，如下。并且是返回了信息的。只不过，浏览器因为一些安全策略的原因，忽略了这个请求的返回并报错了。

那么，浏览器是根据什么判断这个请求是否是允许的。是通过Response Headers。

如果我们要允许我们自定义的Header 在请求中发送，那么我们需要一个新的（Response）Header 告诉浏览器，这个操作是允许的。这个header 就是“Access-Control-Allow-Headers”. 如下，我们在Headers 中添加X-Test-Cors。现在原来的ajax 请求就可以正常使用了。

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
    console.log('request come', request.url)
    
    response.writeHead(200, {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'X-Test-Cors'
        // 'Access-Control-Allow-Origin': 'http://127.0.0.1:8888'
    })
    response.end('123456')
}).listen(8887)

console.log('serve listening on 8887')

这个时候，我们来看我们的请求，是有两个请求的，一个方法是OPTION，另一个是POST。

OPTION 请求 就是预请求。浏览器通过OPTION 请求返回的内容，判断后面的请求是否允许。

同理，我们也可以设置CORS允许的方法，如下：

'Access-Control-Allow-Methods': 'POST, DELETE, PUT'

浏览器跨域的限制，是为了服务器端的安全。它限制了不同的域名与一些HTTP 方法，同时也提供了一些Header 配置项，使得我们能够在特定条件下实现跨域。

最后一个关于跨域的Header: (下面的代码，代表了允许以这种方式跨域的请求的最长时间为1000s。也就是1000s 内不需要再发送预请求OPTION来验证了，直接发正式的请求即可)

'Access-Control-Max-Age': '1000'

Done.

purple_lumpy
关注
专栏目录
浅析CORS跨域请求
大菜鸟的博客
12-22 5081
Cross-Origin Resource Sharing（简称CORS），是W3C制定的网络跨域资源请求的一个“正式”技术。网上相关介绍有很多，但是基本上都停留于理论层面。当你很想知道具体怎么实现一个CORS的时候很难一下子找到靠谱的参考资料。那么这里简单介绍一下前后端CORS的实现机制。 对于前端（JavaScript）而言，做一个CORS和普通ajax请求并没有什么区别（前提是浏览器平台支...
CORS解决跨域请求问题
god__father_的博客
10-24 269
服务端设置请求头，实现跨域请求 服务端代码 app.all('/cors-server', (request, response) => { //设置响应头 response.setHeader("Access-Control-Allow-Origin", "*"); //只有5500端口的网页才可以向这里发送请求，实现跨域 response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500
test_cors
02-12
test_cors
test-cors:跨域资源共享（CORS）
06-11
测试cors 跨域资源共享（CORS） 编译前 下载安装依赖 进入子项目服务器 make bower install
常用跨域方法总结（2）——CORS
weixin_34403693的博客
06-26 124
常用跨域方法总结（2）——CORS 上篇文章介绍了几种常用的跨域方法：常用跨域方法总结，本片为上一篇的补充，对比较重要的Cross Origin Resource Sharing详细介绍。 CORS 出于安全原因，从脚本内发起的跨源HTTP请求会受到一定限制。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着...
推荐开源项目：跨域测试神器 - Test-CORS.org
最新发布
gitblog_00094的博客
05-20 499
推荐开源项目：跨域测试神器 - Test-CORS.org 项目地址:https://gitcode.com/monsur/test-cors.org 项目介绍 Test-CORS.org 是一个强大的在线工具，用于测试和理解跨域资源共享（CORS）机制。这个开源项目提供了客户端代码和服务器端代码的全透明体验，帮助开发者在不同起源之间实现真正的跨域请求。通过访问 http://test-cors....
CORS 跨域解决方案
running_pork的博客
01-04 2035
复杂请求则需要2次，先发起options请求，确认目标资源是否支持跨域，浏览器会根据服务端响应的header自动处理剩余的请求，如果响应支持跨域，则继续发出正常请求；简单跨域请求只需要请求一次，复杂跨域请求需要请求2次，第一次是预检请求（options请求），第二次是真是的跨域请求。所以，当触发预检时，跨域请求便会发送2次请求，增加请求次数，同时，也延迟了请求真正发起的时间，会严重地影响性能。crossDomain: true //// 会让请求头中包含跨域的额外信息，但不会含cookie。
cors-filter-1.7.jar，cors-filter-2.5.jar，cors-filter-2.10.jar
06-20
Tomcat作为一款广泛使用的Java Web服务器，提供了一种方式来处理跨域请求，这就是我们今天要讨论的“cors-filter”jar包。 标题中的“cors-filter-1.7.jar”，“cors-filter-2.5.jar”和“cors-filter-2.10.jar”是...
谷歌跨域插件allow-cors-access-control.zip
08-04
在默认情况下，由于浏览器的同源策略限制，这种跨域请求会被阻止。CORS通过设置特定的HTTP头来放宽这些限制。 描述中提到的“谷歌跨域插件allow-cors-access-control.zip”可能是一个扩展程序，用于帮助开发者在...
react中fetch之cors跨域请求的实现方法
08-27
React 中的 CORS 跨域请求实现方法 React 是一个流行的前端框架， Fetch 是一个内置的 JavaScript 函数，用于发送网络请求。然而，在使用 Fetch 时，经常会遇到跨域问题，即无法从不同域名下的服务器获取数据。这篇...
allow-cors-access-control插件，解决跨域问题，内含使用教程
10-03
`allow-cors-access-control` 插件就是为了解决这一问题而诞生的，它允许我们绕过浏览器的同源策略，方便地在Chrome浏览器上进行跨域请求。 `allow-cors-access-control` 插件的核心功能在于启用CORS（Cross-Origin...
arcgis server10.2跨域(cors-filter-1.7,java-property-utils-1.9)
12-03
在这个场景中，我们关注的是如何解决ArcGIS Server在处理跨域请求时的问题，这涉及到Web开发中的一个重要概念——跨域资源共享（CORS）。 跨域是Web浏览器为了安全起见实施的一种策略，限制了JavaScript从一个源...
CORS跨域限制以及预请求验证
weixin_33896726的博客
09-22 330
CORS 的使用 创建两个服务器，进入对应目录，命令行 node server.js，node server2.js，启动服务器。 server.js 会读取 test.html，在8888端口显示，test.html发送跨域请求8887服务器，server2.js通过设置'Access-Control-Allow-Origin': 'http://127.0.0.1:8888'允许跨域。 浏览器...
CORS跨域请求及实现机制
笑释一切的博客
01-03 1万+
一、什么是CORS CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只要服务器实现了CORS接口，就可以跨源通信。 CORS有两种请求，简单请求和非简单请求。 二、同源 跨域就等于从百度访问谷歌的资源，URL由协议、域名、端口和路径组...
[koa2] 之 [koa2-cors] 解决跨域问题
Alice
01-03 5769
用koa2写了一个数据服务器，但是调试这个接口的时候，发现需要跨域，于是引入了koa-cors插件，但是还是不定时出现 更换插件版本，解决了该问题，之前的版本卸载掉。 npm install --save koa2-cors var cors = require('koa2-cors'); //允许跨域 app.use(cors()); ...
缓存头 Cache-Control 的含义和使用
热门推荐
purple_lumpy的博客
06-16 1万+
本篇我们来写一下HTTP 中的缓存，即Cache-Control 。 Cache-Control 的可缓存性（指明哪些地方可以缓存返回的数据）： - public (HTTP 返回的时候在Heaher 中设置Cache-Control 的值为‘public’。它代表，这个HTTP 请求它返回的内容所经过的任何路径中，包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器，都可以进行对...
Springboot处理CORS跨域请求
09-09
Springboot处理CORS跨域请求的方式有多种。其中一种方式是通过委托给DefaultCorsProcessor来实现对CORS规则的校验。 另一种方式是使用@CrossOrigin注解，在控制器方法上添加该注解可以指定允许跨域的源、方法、头部信息等。这样在接收到跨域请求时，Springboot会自动处理CORS相关的响应头信息，实现跨域请求的处理。 浏览器将CORS请求分为两类：简单请求和非简单请求/预检请求。对于简单请求，浏览器会直接发送请求，而对于非简单请求，浏览器会先发送预检请求，获取服务器对跨域请求的授权信息。Springboot可以根据请求类型自动处理这两种类型的请求，包括在响应中添加Access-Control-Allow-Origin、Access-Control-Allow-Methods等头信息，以实现跨域请求的处理。 除了上述两种方式，还可以通过其他配置文件或过滤器来处理CORS跨域请求。例如，可以在application.properties或application.yml文件中添加相关配置，如设置Access-Control-Allow-Origin来指定允许跨域请求的源。另外，也可以通过编写自定义的过滤器来处理跨域请求，通过设置响应头信息来允许跨域请求的访问。不同的方式可以根据具体的需求选择使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值