在 VUE 项目中，使用 Axios 请求数据时，提示跨域，该怎么解决？-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 VUE 项目中，使用 Axios 请求数据时，提示跨域，该怎么解决？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

axios跨域请求头,前端的诱惑,vue.js,前端,javascript
在 VUE 项目开发时，遇到个问题，正常设置使用 Axios 库请求数据时，报错提示跨域问题。

那在生产坏境下，该去怎么解决呢？

其可以通过以下几种方式去尝试解决：

1、设置允许跨域请求的响应头

1.1 在响应头中添加 Access-Control-Allow-Origin 字段，将其值设置为允许跨域请求的源地址。

例如，如果您的源地址是 http://localhost:8080，则可以设置如下响应头：

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

1.2 下面是一个简单的示例，展示如何在服务器端使用 Node.js 设置响应头。

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

// 设置允许跨域请求的响应头
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!' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000')
})

在上面代码中，使用 Express.js 创建简单的服务器，允许跨域请求的地址是 http://localhost:8080。

在每个请求中，都会在响应头中添加 Access-Control-Allow-Origin，并将值设置为http://localhost:8080，这样浏览器就不会阻止跨域请求的发送了。

1.3 VUE应用层使用 Axios 发送 GET 请求，通过以下方式获取服务器返回的数据。

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

在上面代码中，使用 Axios 发送 GET 请求到 http://localhost:3000/api/data，获取服务器返回的数据，并将返回的消息打印到控制台。

要注意在实际开发中，为了应用的安全性，尽量缩小允许跨域请求的源地址。

2、使用 proxy 代理。

2.1 在 VUE 的配置文件 config.js 中配置代理，请求转发到目标服务器。

例如，如果目标服务器地址是 http://api.example.com，则可以在 vue.config.js 中添加配置：

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

在 VUE 发送请求时，将会被代理到 http://api.example.com/api。

2.2 下面简单示例如何在 VUE 项目中使用代理。

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 创建代理，并将其应用到所有路径以 /api 开发的请求中。

在配置中，目标地址设置为 http://api.example.com，changOrigin 设置为 true,表示发送请求时将设置正确的 Origin 头部。

2.2.3 在 VUE 应用层中发送请求。

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

这里使用了相对路径 /api/data 发送了一个 GET 请求，实际上该请求会被代理到 http://api.example.com/api/data 上。

通过这种方式，我们可以使用 VUE 提供的代理功能，将跨域请求转发到目标服务器，从而避免跨域问题。

注意：为确保代理功能正常工作，需要将 VUE 应用层的开发服务器启动在和代理服务器相同的域名和端口下。

3、设置 withCredentials 来解决 VUE 中跨域请求问题。

3.1 让 Axios 在所有请求中携带凭证信息。

import axios from 'axios';

axios.defaults.withCredentials = true; // 设置 withCredentials 选项为 true

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

3.2 让 Axios 在单个请求中携带凭证信息。

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