Vue解决跨域问题

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

// vue.config.jsmodule.exports = {devServer: {port: 5927, // 设置本地开发服务器的端口，选填proxy: {'/api': { // 拦截 /api 开头的请求target: 'http://localhost:10001', // 代理目标地址changeOrigin: true, // 是否改变请求头中的originpathRewrite: {'^/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.jsimport { 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);});}}
};