快捷導(dǎo)航

vue解決跨域問題的幾種常用方法(CORS)

更新時間：2023年05月23日 16:46:42 作者：堅書直實(shí)i

在Vue中解決跨域問題有多種方法,今天通過本文給大家介紹幾種比較常見的方法，對vue解決跨域問題感興趣的朋友跟隨小編一起看看吧

在Vue中解決跨域問題有多種方法。以下是幾種常見的方法：

1. 代理服務(wù)器：在開發(fā)環(huán)境中，可以配置一個代理服務(wù)器來轉(zhuǎn)發(fā) API 請求，繞過瀏覽器的同源策略?？梢允褂?http-proxy-middleware 等中間件來實(shí)現(xiàn)代理配置。在 vue.config.js 文件中進(jìn)行配置，示例如下：

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

上述配置將所有以 /api 開頭的請求轉(zhuǎn)發(fā)到 http://api.example.com。

在上述的例子中，其實(shí) pathRewrite 也可以不寫，例如：

    devServer: {
      open: true,
      port: 8080,
      // headers: {},
      host: 'test.meditrusthealth.com',
      disableHostCheck: true,
      https: true,
      proxy: {
        "/gwkf": {  // "/gwky" 是后端的服務(wù)名，地址后端以它為開頭的
          target: "https://baidu.com/", //你需要訪問的網(wǎng)址 
          changeOrigin: true,
        },
         // 像這種可以配置多個，后端會有多個服務(wù)名的情況
         // 首先我們需要獲取到后端的服務(wù)名，就是需要代理的服務(wù)名，這個我們可以通過swagger，來找到
         // 第二點(diǎn)，我們需要找到請求路徑，如果是測試環(huán)境(開發(fā)環(huán)境)，就用測試環(huán)境、生產(chǎn)環(huán)境就用生產(chǎn)環(huán)境的路徑。
         // 然后就在target里面，添加上域名就可以了
         // changeOrigin 要為true，意思就是：當(dāng)進(jìn)行代理時，Host 的源默認(rèn)會保留
        // （即Host是瀏覽器發(fā)過來的host），
        // 如果將changeOrigin設(shè)置為true，則host會變成target的值；在vue-cli3中，
        // 默認(rèn)changeOrigin的值是true，意味著host設(shè)置成target，這與cue-cli2不一致，
        // vue-cli2這個默認(rèn)值是false。
        "fast-admin": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },
        "fast-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },
        "mth-core-service": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },
        "mth-core-admin": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },
        "mth-capital-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },
        '/fast-provide': {
          target: 'https://test-mobile.com', 
          secure: false,
          changOrigin: true,
          logLevel: 'debug'
        },
      }
    },

2. JSONP：如果后端支持 JSONP 跨域請求，可以使用 Vue 中的 JSONP 庫（如 vue-jsonp）來發(fā)送跨域請求。

3. CORS：后端服務(wù)在響應(yīng)中設(shè)置合適的 CORS 頭部信息，允許特定的源（包括端口和協(xié)議）訪問該接口。在 Vue 中直接發(fā)起跨域請求，由后端處理跨域問題。

4. WebSocket：如果需要在 Vue 中與支持 WebSocket 的服務(wù)器進(jìn)行跨域通信，可以使用 WebSocket API 進(jìn)行連接和通信。WebSocket 不受同源策略的限制。

需要注意的是，以上方法適用于開發(fā)環(huán)境下解決跨域問題。在生產(chǎn)環(huán)境中，應(yīng)該由后端配置合適的跨域策略，以確保安全性。

請根據(jù)你的具體情況選擇適合的解決方案。如果需要更詳細(xì)的說明或代碼示例，請?zhí)峁└唧w的問題或場景。

延伸問題，生成環(huán)境中前端怎么解決跨域呢？

在生產(chǎn)環(huán)境中，前端解決跨域問題的方法有限，因?yàn)闉g覽器的同源策略限制了跨域訪問。以下是一些可行的方法：

通過后端代理：在生產(chǎn)環(huán)境中，可以通過后端服務(wù)器進(jìn)行跨域請求。前端將請求發(fā)送到同域下的后端接口，然后后端服務(wù)器再代理到目標(biāo)接口。這樣前端請求就遵循同源策略，不會產(chǎn)生跨域問題。
CORS（跨域資源共享）：如果你有權(quán)限控制后端接口，可以在后端設(shè)置 CORS 頭部信息，允許特定的源（包括端口和協(xié)議）訪問該接口。通過在響應(yīng)中設(shè)置合適的 CORS 頭部，瀏覽器將允許前端跨域訪問。
JSONP（僅限于 GET 請求）：如果后端支持 JSONP，可以使用 JSONP 來進(jìn)行跨域請求。JSONP 利用了 <script> 標(biāo)簽不受同源策略限制的特性，在前端動態(tài)創(chuàng)建 <script> 標(biāo)簽來請求跨域接口。

需要注意的是，在生產(chǎn)環(huán)境中，由于安全性和跨域限制的考慮，應(yīng)該限制跨域請求的源和目標(biāo)，避免不必要的安全風(fēng)險。請與后端開發(fā)人員合作，并根據(jù)具體需求和安全策略選擇合適的解決方案。

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

您可能感興趣的文章: