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
关注
Http的CORS
Meskjei的博客
04-10 956
文章目录浏览器的同源策略CORS例子预检请求 浏览器的同源策略 所谓同源策略，就是指浏览器会限制从一个源加载的网页和脚本与其他源的资源交互。这是一种用于隔离潜在恶意软件的机制。 可能有人会奇怪，明明网页是自己写的，自己怎么会请求含有恶意程序的URL呢？话虽如此， 可是我们在开发中经常会引入第三方的库，当我们通过script标签将它们引入的时候是没有限制的。而它们之中就可能含有对恶意URL的请求。 ...
跨域资源共享 CORS 详解
weixin_34365417的博客
04-19 2274
跨域资源共享 CORS 详解作者：阮一峰日期：2016年4月12日CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介...
什么是跨域访问控制
miqi770的专栏
03-14 578
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
HTTP 之 CORS
M106588L的博客
07-25 379
HTTP 之 CORS 简介 CORS 是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。 CORS（Cross-Origin Resource Sharing 跨源资源共享），当一个请求url的协议、域名、端口三者之间任意一...
HTTP访问控制（CORS）
JavaEdge全是干货的技术号
05-02 2243
跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 比如，站点http://domain-a.com的某 HTML 页面通过<img> 的 ...
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逻辑...
创建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...
海星达RTK-CORS连接操作.pdf
03-20
四、 注意事项 在使用海星达RTK-CORS连接操作时，需要注意以下几点： * 只有当液晶显示初始界面或者状态界面时，设备终端软件才能通过串口/蓝牙连接主机，当液晶界面处于模式参数设置界面时，终端无法连接主机，...
http :请求响应报文-web服务-ajax-cors跨域
weixin_57218747的博客
05-15 546
node：http 协议:请求响应报文-web服务-url与对象的转化-ajax-cors跨域 1 梳理重点 1.1搭建服务 注意： ① 站点创建完成后，需要通过node命令启动 ② 创建站点的代码如果发生变化，需要重启服务 ③ 当用户输入域名：端口号/a/b,会请求到createServer接收的回调函数，回调函数需要给予响应，如果没有响应那么会一直请求下去 ④ response.end():end 传入的信息全部在该对象内 const http = require("http");// 内置模块 con
SpringMVC CORS跨域测试包
02-10
SpringMVC CORS跨域测试包
http跨源资源共享（CORS）
qq_22744093的博客
11-03 479
另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型 的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。同时，携带的 Access-Control-Allow-Methods 表明服务器允许客户端使用 POST 和 GET 方法发起请求（与 Allow 响应首部类似，但其具有严格的访问控制）。
HTTP 跨域名请求（CORS）
最新发布
小楼一夜听春雨，深巷明朝卖杏花
09-27 1081
​在 HTML 中，等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。HTML中a/form/img/css/script/iframe/ajax都可以指向资源发起请求的资源所在域不同于该请求所指向资源所在的域的HTTP请求就叫做跨域HTTP请求。
跨域（HTTP访问控制（CORS））
sinat_31089473的博客
06-16 937
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域； Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight ..
HTTP与CORS小结
Zpp的前端学习博客
06-15 828
一、HTTP 1. 基本概念 http超文本传输协议。 请求报文： 请求行 请求头 请求正文/主体（可选） 响应报文： 响应行 响应头 响应正文/主体（可选） 请求行 请求动作（方法）：get、post、put…… 请求url 协议/版本 请求头 随请求一起携带的附加数据 accept：当前请求期望访问的数据类型（MIME） content-type：指示服务器发送的主体内容...
【Http 通信】CORS 跨域资源共享
おうせき碩の博客
07-22 534
Ajax前端请求代码发送带有自定义请求头的PUT请求。ajaxurl{//数据注意内容必须为字典executeTimenow//字典里内容前面key可以不加""，默认会加上""变成字符串但是不会当成变量},//字典后面value有""为字符串，没有为变量beforeSendalert("跨域请求失败。");}});}服务器代码使用CORS跨域访问需要服务器的支持，也就是需要实现CORS接口。。......
Http 跨域(Cors) 详解
imsjw
03-12 1609
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跨域请求的限制与解决
Niall_Tonshall的博客
03-17 3061
1. 什么是跨域？ 要了解什么是跨域，首先需要知道什么是同源策略。同源策略是由Netscape公司提出的一个注明的安全策略，所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器就会在控制台中抱一个异常，提示拒绝访问。 同源策略一般又分为两种： DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的； XmlHttpReq
cors原理 超级简单版本
m0_59070120的博客
04-18 656
浏览器在发送请求时会在消息头上加上origin，value为当前协议+域名+端口，服务器根据这个值，决定是否同意这次请求。 如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误。 cors通过设置Access-Control-Allow-Origin为*来表示接受任意域名的请求，到时也会把该数据挂载在消息头上面回应给浏览器 ...
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、付费专栏及课程。

余额充值