跨域產生的原因：瀏覽器受到同源策略的限制，在不同域名、不同端口、不同協議等情況下不允許資源共享。
解決跨域的方法：
（1）jsonp
通常爲了減輕web服務器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的服務器上，在html頁面中再通過相應的標籤從不同域名下加載靜態資源，而被瀏覽器允許，基於此原理，我們可以通過動態創建script，再請求一個帶參網址實現跨域通信。
缺點只適用於get請求方式，且只支持跨域HTTP請求，請求上存在一定的侷限性，但卻是最早的解決跨域問題的方法。jquery中就用此方法解決了跨域問題：
$("#demo").click(function(){
$.ajax({
url : 'http://www.demo.cn/Test/crossDomain',
data : {},
type : 'get',
dataType : 'jsonp',
success : function (res) {
conosle.log(res);
}
});
});
（2）CORS請求，只需要瀏覽器和服務器的支持，目前幾乎所有瀏覽器都支持該功能。
整個CORS通信中，都是瀏覽器自動完成，對於開發者來說cors通信與同源的ajax沒有差別。瀏覽器一旦發現ajax請求跨域，就會自動添加一些附加請求頭，有時還會預請求一次，在預檢通過後再發送請求座位數據傳輸。此方法需要後端修改響應頭：
header(Access-control-Allow-Origin: * ');
//*代表允許訪問的來源（所有），但是你在請求頭攜帶cookie等東西時，必須要指明，也就是設置跨域白名單。
header('Access-control-Allow-Method: POST,GET'); //允許訪問的方式
普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無須設置，若要帶cookie請求：前後端都需要設置。
原生ajax:
// 前端設置是否帶cookie
xhr.withCredentials = true;
jquery ajax:
$.ajax({
...
xhrFields: {
withCredentials: true // 前端設置是否帶cookie
},
...
});
（3）設置代理。可以簡單理解爲客戶端發送請求時，不直接到服務器，而是先到代理的中間層；同理，當服務器返回數據時，先是到代理的中間層。
以webpack開發配置API代理解決跨域爲例：
①需要使用本地開發插件：webpack-dev-server。
②配置http-proxy ,在webpack的配置文件（webpack.config.js）中進行配置
module.exports = {
...
// webpack-dev-server的配置
devServer: {
proxy: {
// 當請求是以/api開頭的接口，則幫代理訪問到http://localhost
'/api/*': {
target: 'http://localhost', //要代理的域名，必須要加上http
//開啓代理：在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，
這樣客戶端端和服務端進行數據的交互就不會有跨域問題
changeOrigin: true,
pathRewrite:{
'^/api':'/' // 替換target地址，也就是說以後請求http://localhost/demo1地址時，
axios請求地址直接寫成/api/demo1
}
}
},
...
};
在dev環境下，因爲配置了proxyTable可以實現跨域。但是在生產環境中，api前綴被直接寫死，導致報錯。可通過判斷生產環境還是開發環境來動態設置，如果是生產環境就baseUrl='',開發環境baseUrl='/api'。
axios.defaults.baseURL = (process.env.NODE_ENV===‘development’)?'/api':''