MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue中跨域网络请求的解决方案

2021-10-132.0k 阅读

跨域问题的本质

在理解 Vue 中跨域网络请求的解决方案之前，我们首先要明白跨域问题产生的本质。

浏览器出于安全策略的考虑，引入了同源策略（Same-Origin Policy）。所谓同源，是指协议、域名和端口号都相同。例如，http://example.com:8080 和 http://example.com:8081 就不同源，因为端口号不同；http://example.com 和 https://example.com 也不同源，因为协议不同。

当一个页面发起的 AJAX 请求的目标 URL 与当前页面的源不同时，就会触发跨域问题。这意味着浏览器会阻止该请求的响应被 JavaScript 访问，即使服务器实际上已经返回了数据。这种安全策略旨在防止恶意网站通过 JavaScript 窃取用户在其他网站上的敏感信息，比如用户登录态、Cookie 等。

Vue 中常见的跨域网络请求场景

开发环境跨域

在 Vue 项目的开发阶段，我们通常会使用一个本地开发服务器（如通过 vue - cli 创建项目时自带的 webpack - dev - server）。而我们请求的后端 API 服务可能部署在其他域名或端口上，例如后端运行在 http://api.example.com:3000，而前端开发服务器运行在 http://localhost:8080，这时就会产生跨域问题。

生产环境跨域

在生产环境中，前端代码部署到线上服务器后，可能会请求位于不同域名下的后端 API。例如前端应用部署在 http://www.example.com，而后端 API 服务部署在 http://api.example.com，这同样会引发跨域问题。

Vue 开发环境中跨域网络请求的解决方案

使用 webpack - dev - server 的 proxy 配置

  1. 原理
    • webpack - dev - server 提供了一个代理（proxy）功能，可以将跨域请求转发到目标服务器。它的原理是在开发服务器（http://localhost:8080）接收到跨域请求时，不直接让浏览器去请求目标服务器，而是由开发服务器代替浏览器去请求目标服务器，这样就避开了浏览器的同源策略限制，因为对于开发服务器来说，它去请求目标服务器不存在跨域问题。
  2. 配置步骤
    • 首先，确保你的 Vue 项目是使用 vue - cli 创建的。在项目根目录下找到 vue.config.js 文件，如果不存在则创建一个。
    • 在 vue.config.js 中添加如下配置：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 目标服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};
  • 上述配置中，/api 是一个自定义的前缀，它表示当我们在前端代码中发起的请求 URL 以 /api 开头时，webpack - dev - server 会将该请求代理到 http://api.example.com。例如，前端请求 http://localhost:8080/api/users，实际上会被代理到 http://api.example.com/users。
  • changeOrigin: true 表示在转发请求时，修改请求头中的 Origin 字段，使其与目标服务器的源一致，这对于一些需要验证 Origin 的服务器很重要。
  • pathRewrite 用于重写路径，这里将 /api 前缀去掉，以便正确请求到目标服务器的真实路径。
  1. 前端代码示例
    • 在 Vue 组件中，我们可以这样发起请求：
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v - if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/users');
        this.data = response.data;
      } catch (error) {
        console.error('请求出错:', error);
      }
    }
  }
};
</script>

使用 http - proxy - middleware 手动配置代理

  1. 原理
    • http - proxy - middleware 是一个用于创建 HTTP 代理中间件的库。我们可以在 Vue 项目的开发服务器中手动使用它来配置代理，其原理与 webpack - dev - server 的 proxy 类似，都是通过服务器端转发请求来避开浏览器的同源策略。
  2. 安装
    • 在项目根目录下执行以下命令安装 http - proxy - middleware：
npm install http - proxy - middleware --save - dev
  1. 配置步骤
    • 在项目根目录下创建一个 server.js 文件（文件名可自定义）。
    • 在 server.js 中编写如下代码：
const express = require('express');
const { createProxyMiddleware } = require('http - proxy - middleware');
const app = express();

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}));

const port = 8080;
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});
  • 这里我们使用 express 搭建了一个简单的服务器，并使用 http - proxy - middleware 创建了一个代理中间件。当请求以 /api 开头时，会被代理到 http://api.example.com。
  • 然后，我们需要修改 package.json 中的 scripts 字段，以便使用我们新创建的服务器：
{
  "scripts": {
    "serve": "node server.js"
  }
}
  1. 前端代码示例
    • 前端代码与使用 webpack - dev - server 代理时类似：
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v - if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/users');
        this.data = response.data;
      } catch (error) {
        console.error('请求出错:', error);
      }
    }
  }
};
</script>

Vue 生产环境中跨域网络请求的解决方案

CORS（Cross - Origin Resource Sharing）

  1. 原理
    • CORS 是一种在服务器端实现的机制，它允许服务器声明哪些源（Origin）可以访问其资源。浏览器在支持 CORS 的情况下，会在发送跨域请求前，先发送一个预检请求（OPTIONS 请求），询问服务器是否允许该跨域请求。如果服务器返回合适的响应头，表明允许该请求，浏览器才会发送真正的请求。
  2. 服务器端配置
    • Node.js + Express 示例：
      • 安装 cors 库：
npm install cors --save

 - 在 Express 应用中使用：

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

app.use(cors());

// 假设这里有一个 API 路由
app.get('/users', (req, res) => {
  res.json({ message: '用户数据' });
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});
  • 上述代码中，app.use(cors()) 表示允许所有源的跨域请求。如果需要更精细的控制，可以传入配置对象，例如：
app.use(cors({
  origin: 'http://www.example.com', // 只允许这个源访问
  methods: ['GET', 'POST'], // 允许的请求方法
  allowedHeaders: ['Content - Type'] // 允许的请求头
}));
  1. 前端代码示例
    • 在 Vue 组件中，使用 axios 发起请求：
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v - if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('http://api.example.com/users');
        this.data = response.data;
      } catch (error) {
        console.error('请求出错:', error);
      }
    }
  }
};
</script>

JSONP（JSON with Padding）

  1. 原理
    • JSONP 利用了 <script> 标签没有跨域限制的特性。它通过动态创建一个 <script> 标签，将请求的 URL 作为 src 属性值，并在 URL 中指定一个回调函数名。服务器返回的数据会包裹在这个回调函数中，浏览器在加载该 <script> 标签时，会执行这个回调函数，从而达到获取数据的目的。
  2. 服务器端配置
    • Node.js + Express 示例：
const express = require('express');
const app = express();

app.get('/users.jsonp', (req, res) => {
  const callback = req.query.callback;
  const data = { message: '用户数据' };
  res.send(`${callback}(${JSON.stringify(data)})`);
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});
  • 这里服务器接收 callback 参数，将数据包裹在该回调函数中返回。
  1. 前端代码示例
    • 在 Vue 组件中，我们可以这样实现 JSONP 请求：
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v - if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      const script = document.createElement('script');
      const callbackName = 'jsonpCallback';
      window[callbackName] = (data) => {
        this.data = data;
        document.body.removeChild(script);
        delete window[callbackName];
      };
      script.src = `http://api.example.com/users.jsonp?callback=${callbackName}`;
      document.body.appendChild(script);
    }
  }
};
</script>
  • 这里我们动态创建 <script> 标签，并定义了回调函数 jsonpCallback 来处理返回的数据。当数据返回并执行回调函数后，我们清理相关资源。

反向代理服务器配置（以 Nginx 为例）

  1. 原理
    • 反向代理服务器位于前端应用服务器和后端 API 服务器之间。客户端请求先到达反向代理服务器，反向代理服务器根据配置将请求转发到后端 API 服务器，然后将后端 API 服务器的响应返回给客户端。从客户端的角度看，它与反向代理服务器是同源的，从而避开了浏览器的跨域限制。
  2. Nginx 配置步骤
    • 假设前端应用部署在 http://www.example.com，后端 API 服务在 http://api.example.com。在 Nginx 的配置文件（通常在 /etc/nginx/sites - available 目录下）中添加如下配置：
server {
  listen 80;
  server_name www.example.com;

  location / {
    root /path/to/your/frontend/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://api.example.com;
    proxy_set_header Host $host;
    proxy_set_header X - Real - IP $remote_addr;
    proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;
    proxy_set_header X - Forwarded - Proto $scheme;
  }
}
  • 上述配置中，/ 路径用于处理前端应用的请求，/api 路径则将请求代理到 http://api.example.com。同时设置了一些请求头，以确保后端服务器能获取正确的客户端信息。
  • 配置完成后，通过以下命令使配置生效：
sudo ln -s /etc/nginx/sites - available/www.example.com /etc/nginx/sites - enabled/
sudo systemctl restart nginx
  1. 前端代码示例
    • 在 Vue 组件中，使用 axios 发起请求：
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v - if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/users');
        this.data = response.data;
      } catch (error) {
        console.error('请求出错:', error);
      }
    }
  }
};
</script>

不同解决方案的优缺点比较

webpack - dev - server 的 proxy 配置

  1. 优点
    • 配置简单，对于使用 vue - cli 创建的项目，只需在 vue.config.js 中简单配置即可。
    • 开发环境中使用方便，与开发服务器紧密结合，不需要额外搭建复杂的代理服务器。
  2. 缺点
    • 只适用于开发环境，生产环境无法使用。
    • 对于复杂的代理规则和高级配置，灵活性相对有限。

http - proxy - middleware 手动配置代理

  1. 优点
    • 相比 webpack - dev - server 的 proxy 配置，有更高的灵活性，可以根据需求定制代理服务器。
    • 仍然主要用于开发环境，能更好地满足一些特殊的开发需求。
  2. 缺点
    • 配置相对复杂，需要手动搭建服务器并配置代理中间件。
    • 同样不适用于生产环境。

CORS

  1. 优点
    • 是一种标准的跨域解决方案，得到现代浏览器的广泛支持。
    • 服务器端配置相对清晰，可根据需求灵活控制允许的源、请求方法和请求头。
    • 适用于生产环境，能满足大多数场景下的跨域需求。
  2. 缺点
    • 需要服务器端配合进行配置，如果服务器端无法配置 CORS，该方案无法实施。
    • 对于预检请求（OPTIONS 请求）可能会增加一些额外的请求开销，特别是在频繁请求的场景下。

JSONP

  1. 优点
    • 兼容性好，能在一些不支持 CORS 的老旧浏览器中使用。
    • 不需要服务器端额外配置复杂的跨域响应头，只需要按照 JSONP 的格式返回数据。
  2. 缺点
    • 只支持 GET 请求，对于 POST 等其他请求方法不适用。
    • 安全性相对较低，由于是通过动态创建 <script> 标签获取数据，如果被恶意利用，可能导致 XSS 攻击。

反向代理服务器配置（以 Nginx 为例）

  1. 优点
    • 适用于生产环境，通过反向代理服务器可以对请求进行统一管理和优化，如缓存、负载均衡等。
    • 前端代码不需要特殊处理，从客户端角度看不存在跨域问题。
  2. 缺点
    • 需要额外配置反向代理服务器，增加了运维的复杂度。
    • 配置不当可能会影响服务器性能和安全性。

选择合适的解决方案

在选择 Vue 中跨域网络请求的解决方案时，需要根据项目的具体情况来决定。

对于开发环境，webpack - dev - server 的 proxy 配置是一个简单快捷的选择，能满足大多数常规开发需求。如果有更复杂的代理需求，可以考虑使用 http - proxy - middleware 手动配置代理。

在生产环境中，如果服务器端有控制权，CORS 是最常用的方案，它标准且灵活。如果需要兼容老旧浏览器，JSONP 可以作为补充方案，但要注意其安全性和请求方法的限制。对于大型项目，使用反向代理服务器（如 Nginx）进行跨域处理，可以在实现跨域的同时，实现更多的服务器管理和优化功能，但需要有一定的运维能力来进行配置和维护。

总之，根据项目的阶段、服务器端的情况、浏览器兼容性要求以及性能和安全等多方面因素综合考虑，选择最合适的跨域解决方案，以确保 Vue 应用能够高效、安全地与后端 API 进行交互。