跨域
1.什么是跨域？
本地域与服务端的域不一致，是由浏览器同源策略限制的场景，不同源即不同域，就是跨域。
注意：协议端口不同造成的跨域，前台无能为力。 域仅仅是通过URL的首部来识别，而不会去尝试判断相同的IP对应着两个域 。 或者两个域是否在同一个IP上。
2.什么是同源策略？
浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同。
只要 "协议+域名+端口" 任何一个不同都被当作不同的域。
3.跨域解决方案
（1）通过jsonp跨域
JSONP：
原理是：
动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
优点：是兼容性好，简单易用，支持浏览器与服务器双向通信。
缺点：只支持get。只支持http
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
<script>
function createJs(sUrl){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
function box(json){
alert(json.name);
}
</script>
总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
6、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。
目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
CORS
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain
使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
使用HTML5中新引进的window.postMessage方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。
针对react版本^16.6.0有多种解决方案
方案一：package.json中加上proxy代理配置
在packge.json加入
“proxy”：{
'/app':{
"tatget":"http://server.sssss.com:8080/.....",
secure:false,
"changeOrigin":true,
}
}
axios
import axios from 'axios'
http.post = function(api, data){
return new Promise((resolve, reject) =>{
axios.post(api, params).then((tes)=>{resolve(res)})
})
}
http.get = function(api, data){
return new Promise((resolve, reject) =>{
axios.get(api, params).then((tes)=>{resolve(res)})
})
}
export default http
在react组件中使用
const res = await http.post(url, params)
