Vue 关于如何在vue中实现跨域请求问题

news2025/3/6 14:54:57

📚首先，让我们了解一下什么是跨域。当一个请求的URL的协议、域名、端口三者中任意一个与当前页面的URL不同，就称为跨域请求。

🔒为什么会出现跨域问题呢？这是因为浏览器的同源策略限制。同源策略是浏览器最核心的安全功能，它阻止了一个域的JavaScript脚本与另一个域的内容进行交互。简单来说，如果两个页面具有相同的协议、主机和端口号，它们就被认为是同源的，否则就是跨域的。

在Vue.js项目中实现跨域访问请求，通常有以下几种方法：

1. 使用代理服务器（Proxy Server）

这是最常见和推荐的方法。通过在开发环境配置一个代理服务器，可以将所有跨域的请求转发到目标服务器。

步骤：

安装http-proxy-middleware：

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

配置vue.config.js：在项目根目录下创建或编辑 vue.config.js 文件，添加代理配置。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://your-api-url.com', // 目标服务器地址
        changeOrigin: true, // 是否改变请求的源头
        pathRewrite: { '^/api': '' }, // 重写路径，去掉/api前缀
        secure: false, // 如果是HTTPS接口，需要设置为false
      },
    },
  },
};

目标服务器地址：
- 确保https://your-api-url.com 是正确的，并且该服务器正在运行。
代理路径匹配：
- /api 是前端路由前缀，确保所有的跨域请求都以 /api 开头。
- pathRewrite 中的正则表达式 ‘^/api’ 会将路径中的 /api 前缀去掉。
secure 配置：
- 如果目标服务器是 HTTPS 的，但你使用的是自签名证书，可以设置为 false。否则，如果目标服务器是 HTTP 的，则不需要设置。
- 如果目标服务器是 HTTPS 的且使用有效的证书，建议保留 secure: true 或省略该配置。
changeOrigin 配置：
- 设置为 true 会将请求头中的 Host 改为目标服务器的域名，有助于某些后端服务器正确处理请求。

在Vue组件中使用：
目前我是用 axios插件请求的
安装
npm install axios

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

然而/v1/models就是接口后缀
在这里插入图片描述

2. 使用CORS（跨域资源共享）

如果目标服务器支持CORS，可以在服务器端配置允许来自特定源的请求。

步骤：
在服务器端配置CORS：具体配置方式取决于服务器端的技术栈。例如，在Express.js中可以使用 cors 中间件。

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

app.use(cors({
  origin: 'http://your-vue-app-url.com',
}));

app.get('/api/some-endpoint', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
在Vue组件中使用：

axios.get('https://your-api-url.com/api/some-endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

3. 使用JSONP（仅支持GET请求）

JSONP是一种通过 <script> 标签来实现跨域请求的方法，但它只支持GET请求。

步骤：
在Vue组件中使用：

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = `https://your-api-url.com/api/some-endpoint?callback=handleResponse`;
document.body.appendChild(script);