跨域解决方案（跨域解决方案的原理）

在

Vue 中 配置 跨域

可以通过修改

配置

文件或者使用插件来

实现

。下面分别介绍两种方法：

1. 修改

配置

文件

在

Vue

的

config

文件夹下的index.js

中

，可以找到如下代码：

 javascript module.expor ts = { dev: { // ... }, // ... } 

在其

中

添加如下代码：

 javascript module.expor ts = { dev: { // ... proxyTable: { '/api': { target: 'http://localhost:3000', // 接口的域名 changeOrigin: true, // 如果接口 跨域 ，需要进行这个参数 配置 pathRewrite: { '^/api': '' // 将/api替换为'' } } } }, // ... } 

其

中

，proxyTable表示代理表；/api表示需要代理的接口路径；target表示接口的域名；changeOrigin表示是否

跨域

；pathRewrite表示路径重写。

然后在发送请求时，将接口路径改为/api/即可。

例如：

 javascript this.$http.get('/api/userinfo').then((response) => { console.log(response.data) }) 

2. 使用插件

可以使用axios或者

vue

-resource等插件来发送

跨域

请求。以axios为例，可以在main.js

中

添加如下代码：

 javascript import axios from 'axios'  Vue .prototype.$http = axios.create({ baseURL: 'http://localhost:3000', // 接口的域名 timeout: 5000, // 请求超时时间 withCredentials: true, // 允许携带cookie crossDomain: true // 允许 跨域 }) 

然后在组件

中

使用：

 javascript this.$http.get('/userinfo').then((response) => { console.log(response.data) }) 

其

中

，baseURL表示接口的域名；timeout表示请求超时时间；withCredentials和crossDomain表示允许携带cookie和允许

跨域

。

到此这篇跨域 解决方案（跨域解决方案的原理）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/19390.html