初识vue（13）—— 解决 vue 跨域问题

女爷i 2022-10-30 11:21 187阅读 0赞

> **当我们请求一个接口的时候，出现下图所示情况，说明请求跨域。**

![在这里插入图片描述][20210219103303159.png]

> **那么如何解决跨域问题呢？**

> **用 vue 脚手架创建好项目后，可以在 vue 项目根目录下找到 config 文件夹，然后找到该文件夹下的 index.js 文件，最后找到下图所示位置的 proxyTable: \{\} 代码：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

> **在该处加入以下代码：**

proxyTable: { 
      '/api': {  // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:4000', // 应该在这里填写自己项目真实的后台接口
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      }
    },

> **在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器再由本地的服务器去请求真正的服务器。**

> **之后在发请求的时候，在接口前加上 ‘/api’ 即可。**

> **如以下示例：**

![在这里插入图片描述][20210219104857654.png]  
![在这里插入图片描述][20210219104918656.png]

> **这里是我对 ajax 进行了封装，如上图所示，在接口前加个 ‘/api’ 即可。**

[20210219103303159.png]: /images/20221024/74429d7e65e5492ab37b9d6540c603b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221024/80db970241d347828c1432fe94f2c30c.png
[20210219104857654.png]: /images/20221024/2ab4a1e9db2c4162849f21f6035f3f5f.png
[20210219104918656.png]: /images/20221024/2836f6b6755e4751940753709f2f1bb6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue解决跨域问题

两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。跨域问题的报错是下面这样的...

╰半夏微凉°/ 2024年04月18日 08:51/ 0 赞/ 79 阅读

相关 Vue解决跨域问题

创建Vue项目，在src同级目录下创建vue.config.js文件。 vue.config.js文件内容如下： module.exports = {

野性酷女/ 2023年10月08日 23:27/ 0 赞/ 56 阅读

相关初识vue（13）—— 解决 vue 跨域问题

> 当我们请求一个接口的时候，出现下图所示情况，说明请求跨域。 ![在这里插入图片描述][20210219103303159.png] > 那么如何解决跨域问题呢？ >

女爷i/ 2022年10月30日 11:21/ 0 赞/ 188 阅读

相关 vue解决跨域问题（下）

目录 1. 前言 2. 问题引入 2.1 整合后端问题 2.2 整合前端问题 3. 解决方案 3.1 方案1（无效

男娘i/ 2022年10月13日 05:13/ 0 赞/ 181 阅读

相关跨域问题学习记录 -- 初识跨域

最近工作中遇到了跨域问题，其实这个名词我一直都能听别人提起，但是确实没有仔细研究过，因此我会通过几篇系列文章，记录下我学习的过程。今天的这篇文章主要从以下2个方面来介绍：

客官°小女子只卖身不卖艺/ 2022年05月23日 01:44/ 0 赞/ 172 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

向右看齐/ 2022年05月07日 16:58/ 0 赞/ 278 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

Dear 丶/ 2022年05月07日 03:48/ 0 赞/ 295 阅读

相关 Vue解决跨域问题

在config文件夹下面的index.js里面进行修改这个是3\版本其他版本不一定是这个文件夹 module.exports = { dev:

àì夳堔傛蜴生んèń/ 2022年01月21日 06:11/ 0 赞/ 357 阅读

相关解决vue的跨域问题

> 使用官方推荐方法进行跨域问题解决 ![71fbc7ebfd09435866efe8801ea111dd.png][] 之前使用vue-jsonp 来解决跨域问题，这次使

你的名字/ 2021年09月04日 05:28/ 0 赞/ 528 阅读

相关 vue解决跨域问题汇总

方法1：后台更改header `header('Access-Control-Allow-Origin:')；`//允许所有来源访问 `header('Access-

男娘i/ 2021年07月25日 19:52/ 0 赞/ 391 阅读