Vue $http跨域解决方案：proxyTable配置详解

在Vue.js应用中，处理$http的get和post请求的跨域问题是一个常见的挑战，特别是在与后端API进行通信时。在开发过程中，由于浏览器的同源策略限制，Vue应用默认情况下不能直接向其他域名发送AJAX请求。为了解决这个问题，我们可以利用Vue CLI中的`config/index.js`文件来配置一个代理转发中间件。 首先，打开`config/index.js`文件，在`proxyTable`对象中添加针对特定路径的配置。例如，如果你的API接口地址是`http://localhost:9080`，可以设置如下： ```javascript proxyTable: { '/api': { target: 'http://localhost:9080', // 后端服务器地址 changeOrigin: true, // 允许跨域请求 pathRewrite: { // 重写请求路径，去除/api前缀 '^/api': '' } } }, ``` 在这个配置中，`/api`路径将被代理到`http://localhost:9080`，`changeOrigin`设置为`true`表示允许跨域，而`pathRewrite`部分则用于在前端发送请求时去掉`/api`，确保实际请求的URL符合后端服务器的期望。 在你的Vue组件中，当你使用`$http`进行get或post请求时，例如用户登录的表单提交操作： 1. 对于GET请求： ```javascript submitForm() { var formData = JSON.stringify(this.ruleForm); this.$http.get('/api/amdatashift/login/probe', { emulateJSON: true }).then(response => { console.log(response.data); }).catch(error => { console.log('服务器异常'); }); } ``` 2. 对于POST请求： ```javascript submitForm() { var formData = JSON.stringify(this.ruleForm); this.$http.post('/api/amdatashift/login/user', { username: this.ruleForm.username, password: this.ruleForm.password }, { emulateJSON: true // 必须设置此选项，以便正确处理跨域请求 }).then(response => { console.log(response.data); }).catch(error => { console.log('服务器异常'); }); } ``` 在使用`emulateJSON: true`时，Vue将自动将发送的数据转换为JSON格式，这有助于解决跨域时可能遇到的问题。 需要注意的是，虽然你在浏览器中看到的请求地址仍然是`http://localhost:8080`（Vue应用的初始地址），但实际请求已经被代理到`http://localhost:9080`，实现了跨域请求。另外，确保你的后端服务器已经设置允许跨域，如通过设置CORS头信息。这样，即使前端和后端不在同一域名下，Vue应用也能顺利完成跨域数据交互。