Vue跨域异常指南：掌握常见陷阱和解决方案

2024-02-07 00:33:32

跨越藩篱：解决Vue跨域异常的终极指南

在Vue应用程序开发的迷人世界中，跨域异常就像讨厌的绊脚石，阻碍我们与服务器无缝通信的道路。但不要害怕，踏上我们破解跨域谜团的冒险之旅，让你的应用程序与服务端和谐共舞。

一、跨域异常的根源

想象一下，你的Vue应用程序和服务端生活在不同的王国中，受到名为“同源策略”的严密守卫所阻隔。该政策将浏览器限制在同一个起源（域名、端口、协议）内进行通信，以保护用户的数据安全。当你的应用程序和服务端偏离这个神圣的联盟时，就会触发跨域异常。这些异常会以不同的形式出现，如：

HTTP 401 未授权错误，表示浏览器无法访问来自不同源的资源
CORS 相关错误（如缺少“Access-Control-Allow-Origin”），表明服务端未授予跨域访问权限
无法获取或设置 Cookie，因为它们受同源策略的限制
与 WebSocket 建立连接失败，因为该协议依赖于跨域通信

二、配置代理规避跨域

就像一位聪明的间谍巧妙绕过敌人的防线，代理可以帮助我们绕过同源策略的限制。通过充当中介，代理将请求重定向到代理服务器，该服务器会代浏览器向服务端发送请求，从而打破跨域障碍。

1. Vue CLI 项目

对于 Vue CLI 项目，在 vue.config.js 文件中配置代理轻而易举：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

2. Express.js 项目

在 Express.js 项目中，我们可以在应用程序初始化时设置代理：

// app.js
const express = require('express');
const app = express();

app.use('/api', require('cors')());

app.use('/api', (req, res) => {
  // 转发请求到后端服务器
  const url = 'http://localhost:3000' + req.url;
  req.pipe(request(url)).pipe(res);
});

app.listen(3001);

三、检查 CORS 首部信息

CORS（跨域资源共享）就像一张通行证，允许浏览器与不同源的服务器和平相处。为了让我们的请求顺利通过，我们需要确保服务端正确设置了 CORS 首部信息。在 Express.js 中，我们可以使用以下代码进行配置：

// app.js
const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});