開發環境中跨域
名詞解釋
1、同源策略：
同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
2、同源：
所謂同源，就是指協議、域名、端口號，三者都一樣就是同源，只要有一個不同就是跨域。
3、跨域：
又非同源策略請求。在瀏覽器裏面域名、端口、IP地址、協議，有任何一項不同，就是跨域。
如：看下面的鏈接是否與 http://www.test.com/index.html 同源？
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:8090/index.html 不同源 端口不同(8090)
http://www.dyna.com/index.html 不同源 域名不同(dyna)
4、代理服務器：
前端需要發送請求的url爲“http://localhost:8080/teach/xxx/xxx”,請求的目標服務器爲“http://localhost:8012/teach/xxx/xxx”，前端發送請求，直接請求目標服務器是請求不通的（因爲端口不同），所以需要一箇中介來處理。前端發送請求，先向本地虛擬服務器發送請求（中介），再由本地虛擬服務器（中介）向目標服務器發送請求，目標服務器返回數據給本地虛擬服務器（中介），本地虛擬服務器（中介）再把接收到的返回數據返給前端發送的請求。這個本地虛擬服務器（中介）就是所謂的代理服務器。
解決方式
JsonP(只能處理get請求)、cors(後端開啓)、代理服務器.
項目背景
使用Vue-cli創建的項目，開發地址是localhost:8080,需要訪問本機上的後臺服務器localhost:8012,相同域名不同端口之間的訪問，需要跨域才能正確請求後端接口。跨域的方法有很多，通常都需要後臺配置。在開發過程中，由於後臺還沒有進行跨域的配置，所以前端想要正確請求到後端接口，就需要暫時由前端開發人員解決跨域問題。
跨域配置
項目開發是使用vue-cli腳手架創建的項目，可以直接利用Node.js代理服務器，通過修改vue.config.js配置文件中devServer配置項中的proxy實現跨域請求。
1、配置說明：
devServer:{
host:'localhost'， //本地域名
port:8081,//本地端口號
proxy:{
'/api':{ // "/api"---攔截以“/api”開頭的接口地址
target:"http://localhost:3000",//要跨域的域名
changeOrigin：true，//是否開啓跨域
pathRewrite：{ //本身的接口地址沒有‘/api’,這種通用前綴，所以要rewrite，如果本身有則去掉 '^/api':' ' //使用'^/api':' ' 可以把接口中的虛擬/api去掉。 這項
//本身接口中沒有/api，使用/api和'^/api':' '的作用：既能擁有正確的跨域標識，又能在請求接口的時候去掉/api。
}
}
}
}
A、參數proxy詳解:
vue-cli的config配置文件中的參數：proxy 這個參數主要是一個地址映射表，可以通過設置將複雜的url簡化，例如我們要請求的地址是“http://localhost:8080/teach/queryCourseInfoByName”，可以按照如下設置：
proxy: {
'/teach': {
target: 'http://localhost:8080',
//pathRewrite: {
//由於接口中本來就有“/teach”，所以這裏不需要配置pathRewtite這項了
//}
}
}
這樣我們在寫url請求的時候，只用寫成/teach/queryCourseInfoByName就可以代表“http://localhost:8080/teach/queryCourseInfoByName”了。
那這又是如何解決跨域問題的呢？其實在上面的“/teach”的參數裏面有一個changeOrigin參數，接收一個布爾值，如果設置爲true，那麼本地就會虛擬一個服務端接收我們發送的請求並代替轉發該請求，這樣就不會有跨域問題了，這隻適用於開發環境。
B、pathRewrite詳解：
用代理，首先得有一個標識，告訴他我們的這個連接要用代理，不然的話，可能我們的 html，css，js這些靜態資源都跑去代理。所以我們只要接口用代理，靜態文件用本地。’/api’: {}, 就是告訴node，我接口只要是’/api’開頭的才用代理。所以我的接口就要這麼寫 /api/teach/xx/xx。最後代理的路徑就是 http://localhost:8080/xx/xx。可是不對啊，我正確的接口路徑裏面沒有/api，所以此時就需要使用pathRewrite，用’^/api’:’’, 把’/api’去掉，這樣既能有正確標識，又能在請求接口的時候去掉api。當然如果本身的接口中就有/api，那麼就可以把pathRewrite這個參數去掉。
【注意】
接口地址原本是/teach/queryCourseInfoByName，但爲了匹配代理地址，在前面加了一個/api，因此接口地址寫成這樣才能生效：/api/teach/queryCourseInfoByName。
“/api” 爲匹配項，target爲被請求的地址，因爲在axios的url中增加了前綴“/api”，而原本的接口是沒有這個前綴的，所以需要通過pathRewrite來重寫地址，將前綴“/api”轉爲“/”。如果本身的接口地址就有“/api”，就可以把pathRewrite刪掉。
在開發過程中，我加上“/api”的初衷是：後端使用微服務，要實現跨域，部署在服務器後前端接口會發生微小調整，需要加上對應微服務的服務名。開發過程中，後端還沒有解決跨域問題，前端爲了能成功調用接口，爲了方便後期的接口地址調整，所以加上了前綴/api，做統一管理。
2、實例：
請求後端接口：/teach/queryCourseInfoByName
跨域請求接口：/api/teach/queryCourseInfoByName
先請求本地接口
，然後由代理再向 
發起請求。在瀏覽器中可以看到請求的url爲：http://localhost:8080/teach/queryCourseInfoByName,而實際請求的url爲：http://localhost:8012/teach/queryCourseInfoByName,中間的端口轉發已由代理完成。