什么是跨域
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源指協議，端口，域名。只要這個3個中有一個不同就是跨域。 這里列舉一個經典的列子：
#協議跨域
http://a.baidu.com訪問https://a.baidu.com； #端口跨域 http://a.baidu.com:8080訪問http://a.baidu.com:80； #域名跨域 http://a.baidu.com訪問http://b.baidu.com； 現在很多公司都是采用前后分離的方式開發。那么出現經常和會跨域打交道。我這里整理日常開發中解決跨域的幾種方案。我們前端使用的Vue，后端使用的NodeJs。
解決方案
proxyTable
這里vue腳手架生成的標准項目為准。一般在項目config目錄下面有個index文件。里面格式如下：
'use strict' const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:7001',//后端接口地址 changeOrigin: true,//是否允許跨越 pathRewrite: { '^/api': '/api',//重寫, } } }, host: '192.168.0.104', port: 8081, autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'eval-source-map', cacheBusting: true, cssSourceMap: false, }, } 上面配置中，我們根據實際情況只需要修改proxyTable對於配置即可。假設我后端請求地址是http://localhost:7001，所有api的接口url都以/api開頭。所以首先需要匹配所有以/api開頭的.然后修改target的地址為http://localhost:7001。最后修改pathRewrite地址。將前綴 '^api' 轉為 '/api'。如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉。注意這個方式只能在開發環境中使用。
CORS
CORS即跨源資源共享，它定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。它是一個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。但是CORS也具有一定的風險性，比如請求中只能說明來自於一個特定的域但不能驗證是否可信，而且也容易被第三方入侵。 這里一般需要后端配合,開啟cors。一般各種語言都有類似的包。比如NodeJS的koa2-cors
var koa = require('koa'); //npm install --save koa2-cors var cors = require('koa2-cors'); var app = koa(); //開啟 app.use(cors()); 這個方式解決的跨越問題支持開發和生產環境。但是有一定的安全性問題。
Nginx
當我們明白跨越的含義之后。只要解決了'源'的問題。那么跨越也就不存在了。這里我們便會想到proxy，同時也會想到Nginx。
我們只需要在部署靜態資源配置下面加上紅框里面的配置就可以了。同時這個方法支持開發環境和生產環境。
后端程序代理
當然上面2個方法都需要后端的配合和需要修改服務器配置。所有還有一種方法不需要他們配合 ，我們自己就可以做到。就是我們自己啟一個后端程序做代理。然后把所有的請求轉發到服務器。這里要用到node的一個包http-proxy-middleware。關鍵代碼(express)如下
用Vue-cli腳手架搭建了個demo,前后分離就有跨域問題的出現。
vue-clie搭建demo步驟（傳送門）：https://www.cnblogs.com/wangenbo/p/8487764.html
我自己在網上找了2個接口做測試：
CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false
掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1
安裝模塊axios進行ajax請求，直接請求，肯定顯示跨域，無法請求。
=============== 以下為npm run dev 跨域的解決方法 ===============
腳手架Vue-cli已經幫我們留好了接口
參考這篇文章才知道：https://blog.csdn.net/qq_31201781/article/details/78778193
在config目錄下的index.js文件，有個參數：
proxyTable:{}
所以，我把參數添加成：
原來接口：
CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false
掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1
請求鏈接就變成這樣了：
最后，把數據打印出來，就可以了。。
=============== 以上為npm run dev 跨域的解決方法 ===============
=============== 以下為npm run build 跨域的解決方法 ===============
我們要打包上線：就用npm run build會打包成dist文件
但發到線上，就得用nginx解決跨域。
首先，下載nginx
https://blog.csdn.net/biaoge0310/article/details/78900538
入門命令：
在ngix文件目錄下執行以下命令
start nginx 開啟ngix
nginx -s quit 退出
nginx -s reload 重啟
nginx -t 檢查配置文件是否成功
然后：進入nginx/conf目錄下的，找到nginx.conf文件
添加如下配置：
啟動ngix服務器： start nginx
輸入網址：http://localhost:8099
完美！！！！打包后也解決了。。
=============== 以上為npm run build 跨域的解決方法 ===============