HTTP--http之cors(四)

最新推荐文章于 2023-09-27 14:45:43 发布
最新推荐文章于 2023-09-27 14:45:43 发布
阅读量166 收藏
点赞数
文章标签： git
原文链接：https://segmentfault.com/a/1190000017024496
版权

目录结构

clipboard.png

文件内容

server1.js 
const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
    console.log('request come', req.url);
    const html = fs.readFileSync('index.html', 'utf8');
    res.writeHead(200, {
        // "Content-Type":"text/plain"
        "Content-Type":"text/html"
    })
    res.end(html)
}).listen(8888)
console.log('server start at port 8888')
server2.js 
const http = require('http');
http.createServer(function(req, res) {
    console.log('request come', req.url);
    res.writeHead(200, {
        // 'Access-Control-Allow-Origin':"*"
        // 'Access-Control-Allow-Origin':"http://localhost:8887"
        'Access-Control-Allow-Origin':"http://localhost:8888"
    })
    res.end('123')
}).listen(8889)
console.log('server start at port 8889')
index.html 
<!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>Document</title>
</head>
<body>
    8888
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET','http://127.0.0.1:8889');
        xhr.send();
    </script>
</body>
</html>

配置解析

返回的文本类型

       "Content-Type":"text/plain"   //字符串
        "Content-Type":"text/html"   //html

clipboard.png

server2.js

不配置Access-Control-Allow-Origin
  1. 会请求，有响应
  2. 浏览器特有，只是浏览器出于安全，不显示内容
  3. 在git bash上会显示内容
    res.writeHead(200, {
        // 'Access-Control-Allow-Origin':"*"  //允许所有
        // 'Access-Control-Allow-Origin':"http://localhost:8887"
        // 'Access-Control-Allow-Origin':"http://localhost:8888"
    })

clipboard.png

clipboard.png

配置Access-Control-Allow-Origin
'Access-Control-Allow-Origin':"*"  //允许所有
 'Access-Control-Allow-Origin':"http://localhost:8887"  //允许特定

jsonp

利用标签的特性

  1. link
  2. img
  3. script
index.html 
<!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>Document</title>
</head>
<body>
    8888
    <script src='http://127.0.0.1:8889'></script>
</body>
</html>
server2.js 
const http = require('http');
http.createServer(function(req, res) {
    console.log('request come', req.url);
    res.writeHead(200, {

    })
    res.end('123')
}).listen(8889)
console.log('server start at port 8889')

clipboard.png

cors其它配置

默认允许方法

  1. GET
  2. HEAD
  3. POST

当用put方法时

index.html 
<!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>Document</title>
</head>
<body>
    8888
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('PUT','http://127.0.0.1:8889');
        xhr.send();
    </script>
</body>
</html>

clipboard.png
解决办法

    res.writeHead(200, {
        'Access-Control-Allow-Origin':"*",
        "Access-Control-Allow-Methods":"GET,POST,PUT,DELETE"
    })

预请求

clipboard.png

clipboard.png

解决办法

    res.writeHead(200, {
        'Access-Control-Allow-Origin':"*",
        "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE",
        "Access-Control-Allow-Max-Age":"1000",
    })
weixin_34248023
关注
海星达RTK-CORS连接操作.pdf
03-20
四、 注意事项 在使用海星达RTK-CORS连接操作时，需要注意以下几点： * 只有当液晶显示初始界面或者状态界面时，设备终端软件才能通过串口/蓝牙连接主机，当液晶界面处于模式参数设置界面时，终端无法连接主机，...
HTTP访问控制（CORS）
JavaEdge全是干货的技术号
05-02 2245
跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 比如，站点http://domain-a.com的某 HTML 页面通过<img> 的 ...
跨域资源共享 CORS 详解
weixin_34365417的博客
04-19 2276
跨域资源共享 CORS 详解作者：阮一峰日期：2016年4月12日CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介...
Http 跨域(Cors) 详解
imsjw
03-12 1617
1.构成跨域的条件(满足下方任意一个条件则构成跨域) domain不同(域名或者ip不同) 端口不同 协议不同(http/https) 给大家展示一个请求头和响应头,这是满足跨域的 请求头 POST http://127.0.0.1:10030/user/login HTTP/1.1 Host: 127.0.0.1:10030 Connection: keep-alive Content-Leng...
HTTP CORS（HTTP-同源策略）
SeriousLose
12-30 2602
同源策略 同源策略是一种约定,是浏览器的核心基本安全功能, 如果缺少同源策略,浏览器的正常功能会受到影响,web的所有功能是构建在同源策略的基础上的,浏览器只是针对同源策略的一种实现. 现在所有的浏览器都支持同源策略. 在前端开发工作中,经常会遇到同源策略问题,就是向服务器发送请求的时候,不在同一级域名或者不在相同端口或相同协议下. 域名 每一个网站都有自己的服务器,每个服务器都有一个IP地址,每个IP地址都会制定一个域名,域名有一级域名,二级域名,三级域名 http://a(三级域名).goo
http协议（一）CORS跨域请求的限制与解决
Niall_Tonshall的博客
03-17 3062
1. 什么是跨域？ 要了解什么是跨域，首先需要知道什么是同源策略。同源策略是由Netscape公司提出的一个注明的安全策略，所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器就会在控制台中抱一个异常，提示拒绝访问。 同源策略一般又分为两种： DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的； XmlHttpReq
cors-filter-1.7.jar spring解决跨域问题 java
04-20
四、`java-property-utils-1.9.1.jar`的作用 `java-property-utils-1.9.1.jar`库主要用来处理Java的属性文件和属性操作。在配置跨域过滤器时，我们可能需要读取配置文件中的CORS策略参数，这时就可以使用这个库来...
Wcf-cors-behavior:WCF处理Cors的示例行为
05-18
这个接口包含了四个方法：`AddBindingParameters`、`ApplyDispatchBehavior`、`ApplyClientBehavior`和`Validate`。在这里，我们主要关注`ApplyDispatchBehavior`，因为我们需要在这个方法中处理服务器端的CORS逻辑...
跨域请求资源-jsonp和cors区别.pdf
最新发布
04-09
#### 四、CORS与JSONP的比较 1. **请求类型**： - JSONP只支持GET请求。 - CORS支持所有HTTP请求类型，包括GET、POST等。 2. **安全性**： - JSONP的安全性较低，因为它完全依赖于服务端返回的脚本来执行回调...
创建Maven工程有时缺失(jmxri.jar+ring-cors.jar+jmsjar+jmxtools.jar)，四合一
07-04
本文将深入探讨标题中提到的四个关键 jar 文件——`jmxri-1.2.1.jar`、`ring-cors-0.1.5.jar`、`jms-1.1.jar` 和 `jmxtools-1.2.1.jar`，以及它们在Maven工程中的作用。 首先，`jmxri-1.2.1.jar` 是Java Management...
SpringMVC CORS跨域测试包
02-10
SpringMVC CORS跨域测试包
Http的CORS
Meskjei的博客
04-10 959
文章目录浏览器的同源策略CORS例子预检请求 浏览器的同源策略 所谓同源策略，就是指浏览器会限制从一个源加载的网页和脚本与其他源的资源交互。这是一种用于隔离潜在恶意软件的机制。 可能有人会奇怪，明明网页是自己写的，自己怎么会请求含有恶意程序的URL呢？话虽如此， 可是我们在开发中经常会引入第三方的库，当我们通过script标签将它们引入的时候是没有限制的。而它们之中就可能含有对恶意URL的请求。 ...
http跨源资源共享（CORS）
qq_22744093的博客
11-03 481
另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型 的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。同时，携带的 Access-Control-Allow-Methods 表明服务器允许客户端使用 POST 和 GET 方法发起请求（与 Allow 响应首部类似，但其具有严格的访问控制）。
cors原理 超级简单版本
m0_59070120的博客
04-18 657
浏览器在发送请求时会在消息头上加上origin，value为当前协议+域名+端口，服务器根据这个值，决定是否同意这次请求。 如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误。 cors通过设置Access-Control-Allow-Origin为*来表示接受任意域名的请求，到时也会把该数据挂载在消息头上面回应给浏览器 ...
HTTP 跨域名请求（CORS）
小楼一夜听春雨，深巷明朝卖杏花
09-27 1087
​在 HTML 中，等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。HTML中a/form/img/css/script/iframe/ajax都可以指向资源发起请求的资源所在域不同于该请求所指向资源所在的域的HTTP请求就叫做跨域HTTP请求。
聊聊CORS的过度设计缺陷
wonking666的博客
08-03 2787
注：本文不讲CORS原理，且默认你已了解CORS，但对其中一些细节抱有同样的怀疑 同源策略 浏览器的同源策略自其诞生以来就一直存在，如何进行跨域Hack，一代又一代的前后端都为此费尽了心机。 首先可以肯定的是，同源策略的限制是合理的。因为，服务端后台接口就部署在那，任何人只要构造了一个正确的HTTP请求，都能得到服务器的应答。但很显然，我们不希望我们的接口任何人都能访问(事实上，因为大家采...
CORS跨域测试文件
Java进阶之路
04-02 1185
众所周知，跨域解决方案有两种，一种是后端使用拦截器或者过滤器解决，一种是前端JOSNP解决，推荐后端过滤器解决。 下面HTML文件可以测试后端跨域配置是否生效 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta name="keywords" content="j
【Http 通信】CORS 跨域资源共享
おうせき碩の博客
07-22 536
Ajax前端请求代码发送带有自定义请求头的PUT请求。ajaxurl{//数据注意内容必须为字典executeTimenow//字典里内容前面key可以不加""，默认会加上""变成字符串但是不会当成变量},//字典后面value有""为字符串，没有为变量beforeSendalert("跨域请求失败。");}});}服务器代码使用CORS跨域访问需要服务器的支持，也就是需要实现CORS接口。。......
HTTP响应头详解与工作原理
1. Access-Control-Allow-Origin：此头字段用于CORS（跨源资源共享），允许指定哪些源的网页可以访问资源。`*` 表示任何源都可以。 2. Accept-Patch：服务器通过此字段告诉客户端它接受哪种类型的补丁文档格式。 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值