我们模拟一个跨域的请求，一个是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. java——sleep()和wait()

    1.所属类不同sleep()属于Thread而wait()属于Object 2.sleep()没有释放当前锁,wait()则释放了当前锁 3.sleep(0)的目的是使当前线程释放cpu,其他线程可以 ...

  2. vue-cli构建项目添加网站ico的logo

    1.网上找一个把图片改成ico格式的网站,把logo改成ico格式,命名favicon.ico 2.将favicon.ico放入static目录 3.在index.html文件中引入 <link ...

  3. robotframework使用过程中遇到的一些问题

    问题1: 在ride上import library,显示红色解决办法:根据菜单栏tools--view ride log提示依次安装缺少的模块,包括natsort.xlrd.xlwd.xlutils, ...

  4. spark第一篇：RDD Programming Guide

    预览 在高层次上,每一个Spark应用(application)都包含一个驱动程序(driver program),该程序运行用户的主函数(main function),并在集群上执行各种并行操作. ...

  5. 安装Office 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    今天安装office2013的时候总是过会就提示找不到OfficeLR.cab文件 在网上找了好多方法不行,后来将注册表里的office选项全部删除就可以了(HKEY_CURRENT_USER\Sof ...

  6. jmeter-集合点---学习笔记

    集合点: 简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存在的,为了更真实的实现并发这感念,我们可以在需要压力的地方设置集合点,每到输入用户名和密码登录时,所有的虚拟 ...

  7. [OpenStack] [Liberty] Neutron单网卡桥接模式访问外网

    环境配置: * Exsi一台 * Exsi创建的单网卡虚拟机一台 * Ubuntu 14LTS 64位操作系统 * OpenStack Liberty版本 * 使用Neutron网络而非Nova网络 ...

  8. 快速创建jquery插件

    介绍 什么是插件? 插件我们见得很多了,比如浏览器上我们会安装一些去除广告的插件.美化页面的插件等等. 在前端,我们也常常写一些jquery插件来使用.来添加我们常常写的一些功能,方便使用. 为什么要 ...

  9. Android多线程源码学习笔记一：handler、looper、message、messageQueue

    最近在学习Android多线程相关知识的源码,现在把自己的笔记整理一下,写出来加深印象. Android多线程通讯的核心是handler.looper.message.messageQueue,这篇文 ...

  10. Facebook TSDB论文Gorilla分析

    Facebook TSDB论文Gorilla分析 背景 TSDB时序数据库用于存储时间相关的数据,常用于监控系统的数据存储,分布式的TSDB提供了海量的数据存储能力,如InfluxDB.OpenTSD ...