我们模拟一个跨域的请求，一个是8888，一个是8887
//server.js

const http = require('http');

const fs = require('fs');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　const html = fs.readFileSync('test.html', 'utf8');

　　res.writeHead(200,{

　　　　'Content-Type': 'text/html'

　　})

　　res.end(html);

}).listen(8888);
//server2.js

const http = require('http');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　res.end('123');

}).listen(8887);

然后分别启动这两个服务

<!--test.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>

　　　　<script>

　　　　　　var xhr = new XMLHttpRequest();

　　　　　　xhr.open('GET', 'http://127.0.0.1:8887');

　　　　　　xhr.send();

　　　　</script>

　　</body>

</html>
html里面发送了一个8887的get请求，在server 8888端口里面读取了html的内容并发送8887的请求，就制造了一个跨域请求
一、跨域－设置 "Access-Control-Allow-Origin"
请求以后，控制台提示，No 'Access-Control-Allow-Origin' ，'Access-Control-Allow-Origin' 是什么呢？就是服务端允许跨域的头，要怎么设置才能让这个跨域请求生效呢？
// server2.js

const http = require('http');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　res.writeHead(200, {

　　　　'Access-Control-Allow-Origin': '*'

　　})

　　res.end('345');

}).listen(8887);
在server2.js里面设置这个请求头，再从8888里面请求，发现8888里面会开始请求8887，并且没有报错了，这个*是代表所有的网站都可以跨域请求8887,我们可以限制域名，比如'Access-Control-Allow-Origin': 'http://localhost:8888'，这里只能设置一个值，不能设置多个，那么想设置多个怎么办呢？可以设置一个值，动态的去判断
这就是符合期望的跨域状态，这里就有一个概念，我们就这么一个操作，就可以使这个跨域请求让server2接受，其实不管server2有没有接受这个请求，8888都会去发送这个8887的请求，只是没看到这个头，会把请求返回内容给忽略掉，在curl并没有这样的限制，这是浏览器跨域的限制
二、跨域-jsonp
是否只有通过这种方式实现跨域呢，显然不是，因为我们知道json这样一个实现方法，那jsonp到底做了什么呢？我们来看一下,8888端口的内容不变
//server2.js

const http = require('http');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　res.end('345');

}).listen(8887);
server2里面去除掉Access-Control-Allow-Origin，test.html请求的方式改掉
<!--test.html-->

<body>

　　<!-- <script>

　　　　var xhr = new XMLHttpRequest();

　　　　xhr.open('GET', 'http://127.0.0.1:8887');

　　　　xhr.send();

　　</script> -->

　　<script src="http://127.0.0.1:8887"></script>

</body>
再重启8887服务，发现请求使正常发送，也是正常返回的，这是因为，浏览器允许js的跨域请求，他并不在乎跨域的头，所以可以在script里面的代码是一段可执行的js代码，然后去调用jsonp，在发起请求之前，他给我们设置的一些内容，这样就可以达到目的，这就是json的原理，利用了link,script标签的可跨域性

CORS跨域请求的限制和解决的更多相关文章

  1. Spring Boot Web应用开发 CORS 跨域请求支持：

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  2. 4 伪ajax：jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. CORS跨域请求总结

    CORS跨域请求分为简单请求和复杂请求. 1. 简单请求: 满足一下两个条件的请求. (1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Ac ...

  4. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  5. 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法

    今天前后端在联调接口的时候,发生了跨域请求资源获取不到的问题. 首先说明下跨域问题的由来.引自HTTP 访问控制 的一段话: 当 Web 资源请求由其它域名或端口提供的资源时,会发起跨域 HTTP 请 ...

  6. Java实现CORS跨域请求

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...

  7. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  8. CORS跨域请求C#版

    1.什么是跨域请求:  当从A网站使用AJAX请求B网站时,就会出现跨域请求. 此时B网站能够接收到A网站发来的请求并返回相应的结果,但是浏览器拿到B网站返回的数据时检测到与当前网站的域名不同,出于安 ...

  9. django之CORS跨域请求

    对于想要利用django框架实现前后端分离,首要的问题是解决跨域请求的问题,什么是跨域请求?简单来说就是当前发起的请求的域与该请求指向的资源所在的域不一致.当协议+域名+端口号均相同,那么就是同一个域 ...

随机推荐

  1. Redis未授权访问攻击过程与防范

    一.Redis未授权访问攻击过程 攻击主机:kali 目标主机:centos6.8(10.104.11.178) Redis版本:2.8 攻击条件:默认配置,未进行认证 攻击步骤详解: 1.Kali攻 ...

  2. 转 windows下安装pycharm并连接Linux的python环境 以及 windows 下notepad ++编辑 linux 的文件

    ######sample 1:windows下安装pycharm并连接Linux的python环境 https://www.cnblogs.com/junxun/p/8287998.html wind ...

  3. ES6和ES5中的this指向问题

    不多逼逼 直接上代码: var name = "window"; var obj = { name: 'obj', //普通函数 one: function(){ console. ...

  4. IIS 配置asp.net 环境

    打开Internet信息服务管理器,在左侧点击“应用程序池”,下面将以asp.net v4.0 程序池为例 在中间的“ASP.NET V4.0”上右键“高级选项”,展开“进程模型”,找“标识”选项,然 ...

  5. https Android 5.0 以下TLS 版本过低造成的问题

    异常如下 javax.net.ssl.SSLHandshakeException: javax.net.ssl.SSLProtocolException: SSL handshake aborted: ...

  6. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  7. window对象的事件：onresize、onpageshow、onload

    onresize事件非常容易理解: 即当窗口或者框架的大小发生变化时,就会触发此事件. 实例demo onpageshow事件是当用户浏览网页时触发的. onpageshow 事件类似于 onload ...

  8. 如何解决css和js的{}与smarty定界符冲突的问题

    当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error i ...

  9. Makefile2

    规范 target可以是Object file, 可执行文件或者标签(标签一般没有依赖) 越靠近最终结果的target卸载越前面 定义target前, 定义CC, SRC, CFLAGS, OBJS, ...

  10. javascript中的this使用场景

    刚接触js不久时对this总是感到无比迷茫,以下是来自js设计模式与实践里的总结 this总是指向一个对象,有时指向全局对象,有时指向构造对象,有时指向DOM对象 1. 作为对象的方法调用 做为对象的 ...