详解Vuejs2.0 如何利用proxyTable实现跨域请求

Vuejs2.0跨域请求代理配置指南：利用proxyTable实现无缝对接

前言

在前端开发中，本地项目与远端服务器接口的交互常常会遇到跨域问题。即便服务器设置了相应的CORS策略，如Access-Control-Allow-Origin，但在处理需要本地存储cookie的登录等操作时，跨域问题仍然是一大挑战。本文将详细介绍如何在vue-cli项目中配置代理，解决跨域请求问题。

解决方案

在Vuejs2.0项目中，我们可以利用proxyTable来实现跨域请求。在项目的~/config/dev-server.js文件中进行配置。这里使用了非常强大的代理服务器配置包。更多高级用法，请查阅其官方文档。

用法示例

假设我们要请求的远端服务器地址为

在proxyTable中进行如下配置：

```javascript

proxyTable: {

'/api/': {

target: '

changeOrigin: true, // 为基于名称的虚拟主机设置选项changeOrigin为true

pathRewrite: {

}

},

},

```

通过以上的配置，我们就可以实现本地项目与远端服务器的跨域请求。例如，要请求接口

```javascript

this.$http.post('/api/main/getUserInfo.action')

.then(res => {

console.log(res);

});

```

后续操作

在实际工作中，我们还需要在axios中进行一些配置，比如设置baseUrl。以下是具体的配置示例：

```javascript

// 创建axios实例

var http = axios.create({

timeout: 8000, // 设置请求超时时间

baseURL:' // 设置请求的基础url

});

// 添加响应

httpterceptors.response.use(function (response) {

// 配置请求回来的信息

return response;

}, function (error) {

return Promise.reject(error);

});

// 导出http，在main.js中引用

export default http;

```

在main.js中引入配置好的http：

```javascript

import http from './config/axiosConfig';

Vue.prototype.$http = http; // 将http挂载到Vue原型上，方便在其他组件中使用

```

以上就是关于Vuejs2.0如何利用proxyTable实现跨域请求的全部内容。希望对大家的学习有所帮助，同时也请大家多多关注我们的博客，获取更多前端技术资讯。如有任何疑问或建议，欢迎联系我们。