Vue.js本身并不直接解決跨域問題，而是依賴于瀏覽器的同源策略。但是，Vue提供了一些方法來幫助我們解決跨域問題。

原理：

• 瀏覽器的同源策略規(guī)定，不同源（協(xié)議、域名、端口）之間的網(wǎng)絡(luò)請求受到限制，無法直接進(jìn)行跨域訪問。
• Vue通過使用代理、JSONP、CORS（跨來源資源共享）等方式，繞過瀏覽器的同源策略，實現(xiàn)跨域請求。

方法：

1. 代理方式：

   • 在開發(fā)環(huán)境中，可以配置一個代理服務(wù)器，將前端請求發(fā)送到同域下的服務(wù)器上，再由代理服務(wù)器轉(zhuǎn)發(fā)請求到目標(biāo)服務(wù)器，從而實現(xiàn)跨域。
   • 例如，使用vue.config.js文件配置代理：

     module.exports = {devServer: {proxy: {'/api': {target: 'http://example.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
     };
     

     然后，在Vue組件中發(fā)送請求時，使用相對路徑/api代替完整的URL。

2. JSONP方式：

   • JSONP利用了<script>標(biāo)簽的src屬性可以跨域的特性，通過動態(tài)創(chuàng)建<script>標(biāo)簽來加載遠(yuǎn)程腳本，并將數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)返回。
   • 例如，使用Vue的axios庫實現(xiàn)JSONP請求：

     import axios from 'axios';axios.jsonp('http://example.com/api', {params: {callback: 'jsonpCallback'}
     }).then(response => {// 處理響應(yīng)數(shù)據(jù)
     });
     

3. CORS方式：

   • 如果目標(biāo)服務(wù)器允許跨域請求，可以在服務(wù)器端設(shè)置合適的CORS響應(yīng)頭，允許特定的源進(jìn)行跨域訪問。
   • 例如，在服務(wù)器端的響應(yīng)中添加以下響應(yīng)頭：

     Access-Control-Allow-Origin: http://example.com
     Access-Control-Allow-Methods: GET, POST, OPTIONS
     Access-Control-Allow-Headers: X-Requested-With, Content-Type
     

舉例： 假設(shè)前端應(yīng)用部署在http://localhost:8080，需要訪問后端API服務(wù)在http://api.example.com上的接口。可以通過配置代理方式解決跨域問題。

1. 在vue.config.js中配置代理：

   module.exports = {devServer: {proxy: {'/api': {target: 'http://api.example.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
   };
   

2. 在Vue組件中發(fā)送請求：

   import axios from 'axios';axios.get('/api/users').then(response => {// 處理響應(yīng)數(shù)據(jù)
   });
   

通過配置代理后，前端發(fā)送的/api/users請求會被代理服務(wù)器轉(zhuǎn)發(fā)到http://api.example.com/users，成功實現(xiàn)跨域訪問。