我们模拟一个跨域的请求，一个是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. pip 安装库的时候使用豆瓣镜像 提升效率

    由于众所周知的原因,国内网络环境始终处于水深火热之中,python库的安装也不例外. 比如在安装 PyQt5-tools 的时候,网速奇慢无比. 好在国内有不少镜像服务源,以豆瓣为例,网速突飞猛进 使 ...

  2. 在IE8下background-image不显示的解决方法

    刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的: ...

  3. 案例49-crm练习获取客户列表带有分页和筛选功能

    1 案例分析 2 书写步骤 1.封装PageBean 2.书写Action 3.书写Service 4.书写Dao   注意清空之前设置的聚合函数  dc.setProjection(null); 5 ...

  4. POJ 3020——Antenna Placement——————【 最小路径覆盖、奇偶性建图】

    Antenna Placement Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u S ...

  5. 使用InstallShield打包VS程序

    使用InstallShield打包VS程序 InstallShield是微软自己的一个打包工具,这个打包工具,有其优势也有其弊端.其优势,可以很好且方便地将.NET平台的控件以及程序所需要的dll打包 ...

  6. EF删除数据

    1.方法一,面向对象 using (MyDbContent content = new MyDbContent()) { content.Entry<UserInfo>(model).St ...

  7. html:option

    注意事项: (1):In HTML the <option> tag has no end tag.HTML中<option>标签不需要关闭.In XHTML the < ...

  8. linux创建用户与删除用户及问题解决（ubuntu）

    创建的用户不正确,一直在删除创建,发现了挺多问题也学到了一些东西如下是我的总结. (root用户设置: 由于ubtun系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在终端 ...

  9. maven课程 项目管理利器-maven 5-1 课程总结 1星（2018-11-08 07:19）

    1 maven windows环境搭建和配置环境变量 2 maven骨架和pom.xml 解析 3 命令行窗口常用的maven命令 4 仓库和坐标 5 maven Java项目 6 生命周期,依赖聚合 ...

  10. c#真正判断文件类型

    //真正判断文件类型的关键函数 public static bool IsAllowedExtension2(FileUpload hifile) { if (hifile != null) { Sy ...