在 VUE 項(xiàng)目開發(fā)時(shí)，遇到個(gè)問題，正常設(shè)置使用 Axios 庫請求數(shù)據(jù)時(shí)，報(bào)錯(cuò)提示跨域問題。

那在生產(chǎn)壞境下，該去怎么解決呢？

其可以通過以下幾種方式去嘗試解決：

1、設(shè)置允許跨域請求的響應(yīng)頭

1.1 在響應(yīng)頭中添加 Access-Control-Allow-Origin 字段，將其值設(shè)置為允許跨域請求的源地址。

例如，如果您的源地址是 http://localhost:8080，則可以設(shè)置如下響應(yīng)頭：

Access-Control-Allow-Origin: http://localhost:8080

1.2 下面是一個(gè)簡單的示例，展示如何在服務(wù)器端使用 Node.js 設(shè)置響應(yīng)頭。

const express = require('express')
const app = express()

// 設(shè)置允許跨域請求的響應(yīng)頭
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080')
  next()
})

// 處理 GET 請求
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello World!' })
})

// 啟動(dòng)服務(wù)器
app.listen(3000, () => {
  console.log('Server started on port 3000')
})

在上面代碼中，使用 Express.js 創(chuàng)建簡單的服務(wù)器，允許跨域請求的地址是 http://localhost:8080。

在每個(gè)請求中，都會在響應(yīng)頭中添加 Access-Control-Allow-Origin，并將值設(shè)置為http://localhost:8080，這樣瀏覽器就不會阻止跨域請求的發(fā)送了。

1.3 VUE應(yīng)用層使用 Axios 發(fā)送 GET 請求，通過以下方式獲取服務(wù)器返回的數(shù)據(jù)。

.get('http://localhost:3000/api/data')
  .then(response => {
    console.log(response.data.message)
  })
  .catch(error => {
    console.error(error)
  })

在上面代碼中，使用 Axios 發(fā)送 GET 請求到 http://localhost:3000/api/data，獲取服務(wù)器返回的數(shù)據(jù)，并將返回的消息打印到控制臺。

要注意在實(shí)際開發(fā)中，為了應(yīng)用的安全性，盡量縮小允許跨域請求的源地址。

2、使用 proxy 代理。

2.1 在 VUE 的配置文件 config.js 中配置代理，請求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器。

例如，如果目標(biāo)服務(wù)器地址是 http://api.example.com，則可以在 vue.config.js 中添加配置：

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

在 VUE 發(fā)送請求時(shí)，將會被代理到 http://api.example.com/api。

2.2 下面簡單示例如何在 VUE 項(xiàng)目中使用代理。

2.2.1 安裝 http-proxy-middleware 庫

npm install http-proxy-middleware --save-dev

2.2.2 配置代理

const proxyMiddleware = require('http-proxy-middleware')

module.exports = {
  devServer: {
    before: function(app, server) {
      app.use('/api', proxyMiddleware({
        target: 'http://api.example.com',
        changeOrigin: true
      }))
    }
  }
}

配置文件中，使用 http-proxy-middleware 創(chuàng)建代理，并將其應(yīng)用到所有路徑以 /api 開發(fā)的請求中。

在配置中，目標(biāo)地址設(shè)置為 http://api.example.com，changOrigin 設(shè)置為 true,表示發(fā)送請求時(shí)將設(shè)置正確的 Origin 頭部。

2.2.3 在 VUE 應(yīng)用層中發(fā)送請求。

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

這里使用了相對路徑 /api/data 發(fā)送了一個(gè) GET 請求，實(shí)際上該請求會被代理到 http://api.example.com/api/data 上。

通過這種方式，我們可以使用 VUE 提供的代理功能，將跨域請求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，從而避免跨域問題。

注意：為確保代理功能正常工作，需要將 VUE 應(yīng)用層的開發(fā)服務(wù)器啟動(dòng)在和代理服務(wù)器相同的域名和端口下。

3、設(shè)置 withCredentials 來解決 VUE 中跨域請求問題

3.1 讓 Axios 在所有請求中攜帶憑證信息。

import axios from 'axios';

axios.defaults.withCredentials = true; // 設(shè)置 withCredentials 選項(xiàng)為 true

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

3.2 讓 Axios 在單個(gè)請求中攜帶憑證信息。

axios.get('https://api.example.com/data', {
  withCredentials: true
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

注意： 當(dāng)使用 withCredentials 時(shí)，服務(wù)器端需要設(shè)置 Access-Control-Allow-Credentials 響應(yīng)頭為 true，才能讓瀏覽器接受帶有憑證信息的跨域請求。

到此這篇關(guān)于Vue使用Axios庫請求數(shù)據(jù)時(shí)跨域問題的解決方法詳解的文章就介紹到這了,更多相關(guān)Vue Axios跨域問題解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論