在學習跨域之前，我們先了解一下同源的概念：所謂同源就是，兩個網址對應的協議、和主機對於兩個頁面是相同的則這兩個頁面具有相同的源。只要三者之一任意一點有不同，那麼就爲不同源。出於安全方面的考慮，頁面中的JavaScript無法訪問其他服務器上的數據，即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制，實現不同服務器之間通信的效果。接下來我們瞭解解決跨域的幾種方法：
1、JSONP（JSON with Padding）方式，它是JSON的一種使用方法SONP（JSON with Padding）是JSON的一種”使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1.dddd.com 的網頁無法與不是 server1.dddd.com的服務器溝通，而 HTML 的script 元素是一個例外。利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
要注意JSONP只支持GET請求，不支持POST請求。
2、代理：
例如www.123.com/index.html需要調用www.456.com/server.php，可以寫一個接口www.123.com/server.php，由這個接口在後端去調用www.456.com/server.php並拿到返回值，然後再返回給index.html，這就是一個代理的模式。相當於繞過了瀏覽器端，自然就不存在跨域問題。
3、PHP端修改header（XHR2方式）
在php接口腳本中加入以下兩句即可：
header(‘Access-Control-Allow-Origin:*’);（允許所有來源訪問）
header(‘Access-Control-Allow-Method:POST,GET’);（允許訪問的方式）
參考原文連接：https://blog.csdn.net/qq_40859799/article/details/81565153
當開發前端代碼已經編寫完畢，後端的接口也已經準備完成，我們就可以進行前後端的聯調，由於前端和後端的通信屬於跨域，數據的交換是無法實現的，此時我們使用proxyTable實現跨域。
使用方法
vue在配置文件中提供了proxyTable來設置跨域，在config文件夾的index.js文件中
此時，在使用axios發送請求，比如下面的情況
操作步驟
1、修改config/index.js裏proxyTable
proxyTable: {
'/api': {
target: 'http://192.168.42.182:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
}
2、修改config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API: '"/api"' // 加入這一句
})
設置axios的baseUrl
export default {
get (url, params) {
return axios({
method: 'get',
baseURL: process.env.API, // 修改這裏
url,
params,
timeout: 100000
}).then((response) => {
return checkStatus(response)
}).then((res) => {
return checkCode(res)
})
}
}
4、重啓服務器 npm run dev就好啦
原文參考地址：https://blog.csdn.net/u010394015/article/details/81460488
實現原理
跨域是瀏覽器禁止的，服務端並不禁止跨域
所以瀏覽器發給自己的服務端，然後由自己的服務端再轉發給要跨域的服務端，做一層代理
vue-cli的proxyTable用的是http-proxy-middleware中間件
============================分割線=========================
在自己的實踐中，發現我的項目裏並沒有config文件夾，也就是沒有配置項。這時由於在vue-cli 3.0+版本中已經對項目目錄做了簡化，這時我們需要自己手動去創建配置文件。在項目根目錄下，創建vue.config.js。再在這個配置文件中寫proxyTable配置。
原文鏈接：https://www.jianshu.com/p/d42fcb9b7213