Vue解决跨域问题

时间：2024-12-10 18:08:52

要解决 Vue 项目的跨域问题并通过 vue.config.js 配置代理，可以按照以下步骤修改 vue.config.js 文件。你提供的代码大部分已经正确，只需要做一些格式上的调整。以下是正确的 vue.config.js 配置：

// vue.config.js

module.exports = {
  devServer: {
    port: 5927, // 设置本地开发服务器的端口，选填
    proxy: {
      '/api': { // 拦截 /api 开头的请求
        target: 'http://localhost:10001', // 代理目标地址
        changeOrigin: true, // 是否改变请求头中的origin
        pathRewrite: {
          '^/api': '' // 重写路径，将 /api 替换为空字符串
        }
      }
    }
  }
};

解释

  1. port：设置本地开发服务器的端口（此处为 5927），可以根据需要修改。
  2. proxy：配置代理，将所有以 /api 开头的请求转发到 http://localhost:10001。这解决了跨域问题。
  3. changeOrigin：设置为 true，表示修改请求头中的 Origin 字段为目标地址的域名，避免跨域问题。
  4. pathRewrite：^/api 会被重写成空字符串，意味着原本请求的 /api 路径会被移除。

总结

  • 配置代理后，所有请求 http://localhost:5927/api 会被转发到 http://localhost:10001，并且跨域问题得到解决。
  • 确保修改了配置后，重启 npm run serve，才能让新配置生效。

 

两个容易出现的问题总结：

  1. 请求的 URL 代理配置错误（404 错误）：

    • 确保 request.post("/api/save") 请求的 URL 被正确代理到后台服务的实际路径。如果代理配置错误，可能会导致 404 错误。
    • 解决方法：检查 vue.config.js 中的代理设置，确保 /api 被正确代理到后台服务的地址，并且接口路径正确。

  2. 跨域时请求路径未正确替换：

    • 虽然代理已经配置，但浏览器显示的 URL 仍然是前端的 http://localhost:5927/api/xxx，这可能会让人误以为代理没有生效。实际上，浏览器请求会被转发到后台服务。
    • 解决方法：确认后台服务能正确响应代理请求，并检查浏览器开发者工具的 Network 面板，查看实际的请求和响应，确保代理设置正常。

模版api.js

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: '/api',  // 代理到后端的实际地址
  timeout: 5000
});

// 保存数据的接口
export const saveData = (data) => {
  return api.post('/save', data);  // 调用 POST 请求
};

模板Vue组件使用

// 在 Vue 组件中使用 api.js

import { saveData } from './api';

export default {
  data() {
    return {
      form: { name: 'John' }
    };
  },
  methods: {
    save() {
      saveData(this.form).then(res => {
        console.log('保存成功:', res);
      }).catch(error => {
        console.error('保存失败:', error);
      });
    }
  }
};

相关文章