前后端通信—CORS（支持跨域）
根据前端跨域的那些事这篇文章中的跨域的理解这一块，我们重新创建两个服务，第一个服务使用了test.html
const http = require('http')
const fs = require('fs')
http.createServer(function (request, response) {
console.log('request come', request.url)
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
}).listen(8888)
console.log('server listening on 8888')
test.html中使用fetch来发送请求，并且设置了一个自定义的请求头'X-Test-Cors': '123'
<!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>
测试
</body>
<script>
fetch('http://localhost:8887', {
method: 'POST',
headers: {
'X-Test-Cors': '123'
}
})
</script>
</html>
第二个服务，还是设置了'Access-Control-Allow-Origin': '*'允许所有域名下的请求
const http = require('http')
http.createServer(function (request, response) {
console.log('request come', request.url)
response.writeHead(200, {
'Access-Control-Allow-Origin': '*'
})
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
启动两个服务，请求访问第一个服务中的test.html，test.html发送了一个请求
运行结果看到，报错了，在跨域请求中加了自定义的请求头是不允许的（JSONP请求没法设置自定义请求头），其实请求是发送成功了的，并且也有数据返回只是浏览器因为安全策略将返回的数据拦截掉了
这时候就要用到CORS的预请求，在CORS中有一些限制，如下
在跨域的情况下，允许的请求方法只有：GET，HEAD， POST，这三个方法不需要预请求验证，其它的请求方法默认都是不允许的，浏览器要有一个预请求的方式去验证，验证通过之后才能发送请求
在跨域的情况下，允许的Content-Type：test/plain，multipart/form-data，application/x-www-form-urlencoded，除了这三种之外的其它Content-Type同样需要预请求去验证，验证通过之后才能发送请求
在跨域的情况下，自定义请求头也会被限制，需要预请求去验证，验证通过之后才能发送请求
如果我们要允许自定义的请求头在请求里发送，那么我们需要返回一个新的请求头来告诉浏览器我们这个自定义的请求头是允许的，在第二个服务中设置返回的新的请求头
const http = require('http')
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'
})
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
运行结果显示，比之前多一个请求，第一个其实就是浏览器验证的一个请求，第二个才是实际发送的请求
同样请求方法和Content-Type也是可以设置的，没设置之前我们使用PUT的请求方式来请求是会报错的
<!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>
测试
</body>
<script>
fetch('http://localhost:8887', {
method: 'PUT',
headers: {
'X-Test-Cors': '123'
}
})
</script>
</html>
const http = require('http')
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-Methods': 'POST, PUT, DELETE',
})
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
设置之后，就可以使用PUT方式去请求了，运行结果可以看到第二个实际的请求PUT成功的
还有一个设置就是：Access-Control-Max-Age：1000，表示运行这种跨域的请求在第一个预请求验证通过后，1000秒之内第二次请求的时候不需要发送预请求了，可以直接发送实际的请求（也就是上面说的第二个实际的请求）
const http = require('http')
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-Methods': 'POST, PUT, DELETE',
'Access-Control-Max-Age': '1000'
})
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
运行结果可以看到，当我第一个发送请求的时候是需要预请求验证的，当我刷新页面再次请求的时候，就已经不需要预请求验证了
前后端通信—CORS（支持跨域）的更多相关文章
- 【坑】前后端分离开发中 跨域问题以及前台不带cookie的问题
文章目录 前言 跨域问题 cookie问题 拦截器导致的跨域问题 后记 前言 场景一: 前台哒哒哒的点击页面,发送请求,但是后台服务器总是没有回应,后台接口虽打了断点,但是根本进不到断点处: 前端:我 ...
- 前后端分离djangorestframework——解决跨域请求
跨域 什么是跨域 比如一个链接:http://www.baidu.com(端口默认是80端口), 如果再来一个链接是这样:http://api.baidu.com,这个就算是跨域了(因为域名不同) 再 ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- 前后端分离crud（跨域问题）讲解
1 前后端分离 1.1 后端 ssm+maven 多模块 swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511. ...
- 前后端分离 vue+springboot 跨域 session+cookie失效问题
环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session ...
- 前后端分离开发，跨域时jsessionid每次请求都变化的问题解决方法
本解决方法的使用前提是,前端开发使用的是vue,后端使用java(SpringMVC) 在前后端分离开发过程中,可能会出现因跨域而导致每次请求的jsessionid不一致的情况 解决方法: 前端:要在 ...
- 如何解决 Django 前后端分离开发的跨域问题
一.同源策略 1.先来说说什么是源 • 源(origin)就是协议.域名和端口号. 以上url中的源就是:http://www.company.com:80 若地址里面的协议.域名和端口号均相同则属于 ...
- 前后端分离产生的跨域问题的解决方案之--jsonp、nginx代理、设置头信息等
前言 在前后端没有分离的时候,前端开发要么是写静态页面,数据渲染后端来做,要么就是前端的页面和后端的代码刚开始的时候就合并在一起,每次后端代码更新了之后,前端也要更新一下代码,然后重启一下服务,还是比 ...
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
随机推荐
- 自学Python编程的第五天(希望有IT大牛帮我看最下面的代码)----------来自苦逼的转行人
2019-09-15-15:40:24 今天没有学知识,是一个一周总结,把这一周学的知识总结一遍,然后把做过的练习题再做一遍 看是否还会有再出现同样的错误,而且还可以知道有哪些知识点没有掌握好,可以把 ...
- 图解HTTP（二）
第四章 返回结果的HTTP状体码 1.状态码告知从服务器返回的结果 类别 原因短语 1XX Infomational信息性状态码 接收的请求正在处理中 2XX Success成功状态码 请求正常处 ...
- 使用Prometheus针对自己的服务器采集自定义的参数
用一个简单的例子来说明. 我用express和http搭了一个最简单的服务器,监听在8081端口上. 在metrics endpoint上,我会打印出这个服务器从启动至今,服务了多少次请求.这里我只是 ...
- 安装nginx + nginx-gridfs + mongodb
1.安装依赖包 yum -y install pcre-devel openssl-devel zlib-devel git gcc gcc-c++ git clone https://github. ...
- 1行Python代码制作动态二维码
原文地址 https://blog.csdn.net/m0_38106923/article/details/100603516 GitHub网站参见:https://github.com/sylns ...
- springboot通过idea打jar包
springboot打jar包 一． 检查pom文件 <packaging>jar</packaging> 二． 切换到maven窗口 三． 先c ...
- Ceph添加、删除osd及故障硬盘更换
添加或删除osd均在ceph部署节点的cent用户下的ceph目录进行. 1. 添加osd 当前ceph集群中有如下osd,现在准备新添加osd: (1)选择一个osd节点,添加好新的硬盘: (2)显 ...
- Kotlin属性引用进阶与构造方法引用
继续还是探讨Kotlin反射相关的知识点,说实话这块不是太好理解,待在实际工作中去对它进行实践慢慢来加深印象. 属性引用进阶: 在Kotlin中的反射其实是跟Java的反射有对应关系的,具体相关的定义 ...
- 08 c++中运算符重载（未完成）
参考:轻松搞定c++语言 定义:赋予已有运算符多重含义,实现一名多用(比较函数重载) 运算符重载的本质是函数重载 重载函数的格式: 函数类型 operator 运算符名称(形参表列) { 重载实体 ...
- HDU - 3535：AreYouBusy （分组背包）
题意:给你n个工作集合,给你T的时间去做它们.给你m和s,说明这个工作集合有m件事可以做,它们是s类的工作集合(s=0,1,2,s=0说明这m件事中最少得做一件,s=1说明这m件事中最多只能做一件,s ...