为什么会出现跨域的问题？
Javascript的访问是根据同源策略来的，同源策略即（同端口，同协议，同域名）。现在主流的开发方式都是前后端分离，所以很容易就出现跨域的问题。cors即跨域资源共享，解决了前后端分离的资源共享问题。目前主流的浏览器都支持cors
CORS出现场景 简答请求和非简单请求
有些情况并不会触发cors的预检请求（即Options请求）我们将这种称为简单请求，会触发options请求的为非简单请求
- 使用下列方法之一：
GET，HEAD，POST - 不可以设置http头超出以下列表的字段:
Accept,Accept-Language,Content-Language,Content-Type （需要注意额外的限制）,Viewport-Width,Content-Type等。
- 值得说一下的是
Content-Type,它的值仅限于下列三者之一：text/plain,multipart/form-data,application/x-www-form-urlencoded
满足以上两种条件的为简单请求 不满足则为非简单请求
例子
我后台是采用express启动的服务，端口3000
前台是直接利用webstorm创建的html文件,利用webstorm的本地服务器去请求后台接口，发送ajax请求
可以看到，已经不满足同源策略了，端口不一致。请求头中默认加上了origin,已经触发了跨域
这个时候需要服务端允许你跨域获取资源
重启一下express服务
可以看到，后台只要简单设置一下 response.header('Access-Control-Allow-Origin', '*'),允许任何获取即可解决。
利用Jsonp解决
JSONP由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般在请求中指定。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。
主要就是利用src静态资源引用允许跨域
前端代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="deepClone.js"></script>
<script defer src="http://localhost:3000/test_jsonp?callback=callback"></script>
<!--<script src="http://localhost:3000/test_jsonp?callback=callback"></script>-->
<script>
// function addScript(url) {
// // 创建一个script标签
// var scpt = document.createElement('script');
// // 设置对应的src
// scpt.src = url;
// // 追加到页面
// document.body.appendChild(scpt);
// }
//
// window.onload = function() {
// addScript('http://localhost:3000/callback=dataS')
// }
var callback = function(res) {
console.log(res)
}
</script>
</body>
</html>后端express代码
代码语言：javascript复制var express = require('express');
var router = express.Router();
var querystring = require('querystring');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/test_jsonp', function(req, res, next) {
let params = querystring.parse(req.url.split('?')[1]);
let obj = {
name: '张三',
sex: '男'
};
// res.status = 200;
//
// res.body = params['callback'] '(' JSON.stringify(obj) ')';
//
// jsonp返回设置
res.writeHead(200, { 'Content-Type': 'text/javascript' });
res.write(params['callback'] '(' JSON.stringify(obj) ')');
res.end();
});
module.exports = router;这是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性，由其 src属性发送请求到服务器，服务器返回 JavaScript 代码，浏览器接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。现在淘宝有些还是利用jsonp解决的跨域
