現(xiàn)在的項目，大部分都是前后端分離的，前后端最終也會分開部署，前端部署在服務器 192.168.150.200 上，端口 80，后端部署在 192.168.150.100上，端口 8080

我們打開瀏覽器直接訪問前端工程，訪問url：http://192.168.150.200/login.html

然后在該頁面發(fā)起請求到服務端，而服務端所在地址不再是localhost，而是服務器的IP地址192.168.150.100，假設訪問接口地址為：http://192.168.150.100:8080/login

那此時就存在跨域操作了，因為我們是在 http://192.168.150.200/login.html 這個頁面上訪問了http://192.168.150.100:8080/login 接口

區(qū)分跨域的維度：

• 協(xié)議

• IP/域名

• 端口

只要上述的三個維度有任何一個維度不同，那就是跨域操作

舉例：

http://192.168.150.200/login.html ----------> https://192.168.150.200/login [協(xié)議不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.100/login [IP不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.200:8080/login [端口不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.200/login [不跨域]

現(xiàn)在我們已經(jīng)了解了什么是跨域，現(xiàn)在我們探究，如何去解決。

無論是前端還是后端都可以解決跨域的問題，但是我個人認為，在前端解決更加方便和簡單，因此我們現(xiàn)在看怎么在前端解決跨域的問題。

首先在我們的vue前端工程中找到main.js文件，通常在App.vue同級。

我們加入這兩行代碼：

Vue.prototype.$axios = axios
axios.defaults.baseURL='/api'

這樣，我們在從前端往后端發(fā)送請求時，路徑上都會默認添加/api這一級路徑，當然你可以換成任何你喜歡的單詞。

然后找到vue.config.js，通常在你項目的根目錄之下。

我們加入以下幾行代碼：

其中port是你本機vue項目的端口，一般情況下文件中原先就存在，可自行修改成其他端口。

 proxy: {
      '/api': {
        target: 'http://localhost:8090', // 后端服務地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 路徑重寫，將請求中的 '/api' 前綴去掉
        }
      }
    }

然后我們隨便寫兩行代碼測試一下，先把后端代碼啟動起來：

然后我們再把前端代碼啟動：

然后我們訪問：http://localhost:8091/

可以看到：

因為是做測試例子，所以只有一個簡易的界面，現(xiàn)在我們輸入信息，點擊登錄

顯示登錄成功，這時，我們在查看控制臺

ok，不僅后端接收到了請求，前端也接收到了后端的返回信息。

到此這篇關于vue解決跨域問題的方法的文章就介紹到這了,更多相關vue解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論