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

科技前沿 • 2025-05-25 18:30 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

在Vue中配置跨域可以通过修改配置文件或者使用插件来实现。下面分别介绍两种方法：

修改配置文件

在Vue的config文件夹下的index.js中，可以找到如下代码：

module.expor<em>ts</em> = { dev: { // ... }, // ... }

讯享网

在其中添加如下代码：

讯享网

讯享网module.expor<em>ts</em> = { dev: { // ... proxyTable: { &#39;/api&#39;: { target: &#39;http://localhost:3000&#39;, // 接口的域名 changeOrigin: true, // 如果接口<em>跨域</em>，需要进行这个参数<em>配置</em> pathRewrite: { &#39;^/api&#39;: &#39;&#39; // 将/api替换为&#39;&#39; } } } }, // ... }

其中，proxyTable表示代理表；/api表示需要代理的接口路径；target表示接口的域名；changeOrigin表示是否跨域；pathRewrite表示路径重写。

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

例如：

this.$http.get(&#39;/api/userinfo&#39;).then((response) =&gt; { console.log(response.data) })

使用插件

可以使用axios或者vue-resource等插件来发送跨域请求。以axios为例，可以在main.js中添加如下代码：

讯享网import axios from &#39;axios&#39; <em>Vue</em>.prototype.$http = axios.create({ baseURL: &#39;http://localhost:3000&#39;, // 接口的域名 timeout: 5000, // 请求超时时间 withCredentials: true, // 允许携带cookie crossDomain: true // 允许<em>跨域</em> })

然后在组件中使用：

this.$http.get(&#39;/userinfo&#39;).then((response) =&gt; { console.log(response.data) })

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

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

相关推荐