什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说：两个域名只要协议，域名，端口中只要有一个不同，就被成为跨域
浏览器为什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止坏人随意拿到我们的信息去做坏事
在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面对跨域的问题，那我们该怎么解决呢？
1、JSONP
原理：浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行，所以通过动态插入script标签即可达到跨域的请求
特点：数据为json格式
缺点：不能post
<script>
// 回调函数
function getJsonp(data) {
console.log(data);
}
let scriptObj = document.createElement('script');
scriptObj.type = "text/javascript";
scriptObj.src = "https://easy-mock.com/mock/5b9a1ff49746e0452c1a7354/example?callback=testjsonp";
document.head.appendChild(scriptObj);
</script>
2、CORS
原理 ： cors(Cross-Origin Resource Sharing)是W3C CORS 工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否
特点 ：是 JSONP 模式的现代版。支持更多的请求方式，XMLHttpRequest
缺点：需后端配合修改，现代浏览器支持cors，老浏览器依旧要用JSONP
caniuse-cors
Access-Control-Allow-Origin: <origin> | * // 需授权的域名
Access-Control-Allow-Credentials: true | false // 是否携带 Cookie，默认不携带
Access-Control-Allow-Methods: <method>[, <method>]* // 允许的请求方法
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 额外允许携带的请求头
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://www.taobao.com',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE，OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
3、PROXY
原理：proxy代理用于将请求拦截，然后通过服务器来发送请求，然后再将请求的结果传递给前端
node通常用 node-http-proxy即可
proxy太通用了，weblack-dev-server里已集成，使用时直接配置即可webpack-dev-server proxy代理
module.exports = {
entry: {
app: [path.join(paths.src.client, 'index.js')],
vendors: ['moment'], //需要打包的第三方插件
},
output: {
path: paths.dist.client,
filename: 'js/[name].js',
chunkFilename: 'js/[name].js'
},
devServer: {
proxy: {
'/api': 'http://localhost:3000'，
//默认不支持https，https需单独配置
'/https_api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
