我们模拟一个跨域的请求，一个是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. SpEL

    Spriing boot stater中根据配置文件中的条件 生成相应的bean, 以适应不同场景 @ConditionalOnExpression中使用SpEl,  支持各种条件表达式 String ...

  2. 基于spring boot 和MDC实现 同一笔记录的日志跟踪实现--1.filter

    同一个项目中,一般包含controller/servlet.service.dao等.1笔记录的日志贯穿于controller.service.dao中,在并发情况下,那如何找出该笔日志? 可通过以下 ...

  3. caffe 日志保存以及matlab绘制方法（windows以及ubuntu下）

    caffe 用matlab解析日志画loss和accuracy clc; clear; % load the log file of caffe model fid = fopen('log-prev ...

  4. angularjs的ng-repeat回调

    首先html代码是这样的: <label>Name des Leiters:</label><select name="leaderID" id=&q ...

  5. Checkstyle的配置详解

    Checkstyle是一款检查java程序代码样式的工具,可以有效的帮助我们检视代码以便更好的遵循代码编写标准,特别适用于小组开发时彼此间的样式规范和统一.Checkstyle提供了高可配置性,以便适 ...

  6. @ControllerAdvice 拦截异常并统一处理

    在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...

  7. 办公开发环境（外接显示屏，wifi热点）

    笔记本电脑怎样外接显示器 https://jingyan.baidu.com/article/3c48dd34495247e10ae35879.html?qq-pf-to=pcqq.c2c 怎样在Wi ...

  8. Magnum基本介绍

    Magnum is an OpenStack API service developed by the OpenStack Containers Team making container orche ...

  9. 切图技巧——PS篇

    1.选框工具这里可以选择增加选区.减少选区 ==> 2.存储为web格式 1)JPG:一般用于大图 2)gif:可作动图,与png-8基本一样,不支持半透明 3)png-8:不支持动图,不支持半 ...

  10. ASP.NET那点不为人知的事（一）

    http://www.cnblogs.com/OceanEyes/archive/2012/08/13/aspnetEssential-1.html#_label0 我们上网时,在浏览器地址输入网址: ...