什么是跨域？
跨域是通俗的說(shuō)是從一個(gè)域名去請(qǐng)求另一個(gè)域名的資源。比如從www.baidu.com 頁(yè)面去請(qǐng)求 www.taobao.com 的資源。
跨域嚴(yán)格一點(diǎn)來(lái)說(shuō)：兩個(gè)域名只要協(xié)議，域名，端口中只要有一個(gè)不同，就被成為跨域

瀏覽器為什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止壞人隨意拿到我們的信息去做壞事

在團(tuán)隊(duì)的配置中，我們?yōu)榱藴p少前端對(duì)后端的依賴(lài)，提高開(kāi)發(fā)效率，使前后端職責(zé)更清晰等等因素，我們不得不面對(duì)跨域的問(wèn)題，那我們?cè)撛趺唇鉀Q呢？

1、JSONP
原理：瀏覽器對(duì)script的資源引用沒(méi)有同源限制，同時(shí)資源加載到頁(yè)面后會(huì)立即執(zhí)行，所以通過(guò)動(dòng)態(tài)插入script標(biāo)簽即可達(dá)到跨域的請(qǐng)求
特點(diǎn)：數(shù)據(jù)為json格式
缺點(diǎn)：不能post

<script>
    // 回調(diào)函數(shù)
    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 工作草案，它定義了在跨域訪(fǎng)問(wèn)資源時(shí)瀏覽器和服務(wù)器之間如何通信。CORS背后的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務(wù)器相互了解對(duì)方，從而決定請(qǐng)求或響應(yīng)成功與否
特點(diǎn) ：是 JSONP 模式的現(xiàn)代版。支持更多的請(qǐng)求方式，XMLHttpRequest
缺點(diǎn)：需后端配合修改，現(xiàn)代瀏覽器支持cors，老瀏覽器依舊要用JSONP

caniuse-cors

Access-Control-Allow-Origin: <origin> | * // 需授權(quán)的域名
Access-Control-Allow-Credentials: true | false // 是否攜帶 Cookie，默認(rèn)不攜帶
Access-Control-Allow-Methods: <method>[, <method>]* // 允許的請(qǐng)求方法
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 額外允許攜帶的請(qǐng)求頭

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代理用于將請(qǐng)求攔截，然后通過(guò)服務(wù)器來(lái)發(fā)送請(qǐng)求，然后再將請(qǐng)求的結(jié)果傳遞給前端

node通常用 node-http-proxy即可

proxy太通用了，weblack-dev-server里已集成，使用時(shí)直接配置即可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'，
       //默認(rèn)不支持https，https需單獨(dú)配置
       '/https_api': {
          target: 'https://other-server.example.com',
          secure: false
        }
    }
  }
};