一招教你解决 Vue 中的跨域难题，轻松搞定数据请求

2023-05-13 23:16:07

解决 Vue 中跨域难题：axios 和代理服务器

跨域一直是困扰前端开发人员的难题，在 Vue 应用中请求其他域名的资源时，跨域限制常常会阻碍我们的进程。本文将深入浅出地介绍如何利用 axios 库和代理服务器轻松解决 Vue 中的跨域问题，帮助你畅通无阻地请求数据。

一、理解跨域的限制

跨域是指从一个域名向另一个域名发起请求的行为。为了防止恶意攻击和信息泄露，浏览器会对跨域请求施加限制，即同源策略。同源策略规定，只有协议、域名和端口都相同的请求才能被允许。

二、借助 axios 库

axios 是一个强大的 JavaScript HTTP 客户端库，它可以帮助我们轻松发送跨域请求。首先，在你的 Vue 项目中安装 axios：

npm install axios

然后，在 src/api/index.js 中创建 axios 实例，并配置好 baseURL、超时时间和请求头等信息：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://www.example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
})

export default api

三、创建代理服务器

代理服务器可以将请求从你的本地开发环境转发到目标服务器，从而绕过跨域限制。在你的 Vue 项目中，创建一个名为 vue.config.js 的文件，并配置代理服务器：

module.exports = {
  devServer: {
    open: true,
    host: "0.0.0.0",
    port: 3000,
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://www.example.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

四、使用 axios 发起请求

配置好 axios 和代理服务器后，你就可以在 Vue 组件中使用 axios 发起跨域请求了。例如：

import api from '../api/index.js'

export default {
  methods: {
    async fetchMovies() {
      const response = await api.get('/movies')
      console.log(response.data)
    }
  }
}