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

原理：

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

方法：

1. 代理方式：

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

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

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

2. JSONP方式：

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

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

3. CORS方式：

   • 如果目標(biāo)服務(wù)器允許跨域請(qǐng)求，可以在服務(wù)器端設(shè)置合適的CORS響應(yīng)頭，允許特定的源進(jìn)行跨域訪問(wè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，需要訪問(wèn)后端API服務(wù)在http://api.example.com上的接口?？梢酝ㄟ^(guò)配置代理方式解決跨域問(wèn)題。

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

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

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

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

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