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

女爷i 2022-10-30 11:21 199阅读 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 条评论，199人围观）

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

相关阅读

相关 vue解决跨域问题

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

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

相关 Vue解决跨域问题

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

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

相关【Vue】Vue 中解决跨域问题

背景跨域问题，来源于浏览器中的同源策略。同源（或同一个域）是两个页面具有相同的协议，主机和端口号。在前后端分离的项目中，两个页面（即访问端与服务端）通常是非同源的

深碍√TFBOYSˉ_/ 2023年07月10日 14:26/ 0 赞/ 22 阅读

相关 Vue解决跨域问题

1.在前端解决在config/index.js配置proxyTable //解决跨域 proxyTable: { //第三方接口

深藏阁楼爱情的钟/ 2023年06月04日 15:56/ 0 赞/ 19 阅读

相关 vue 解决跨域问题

在config.js文件中（如果没有就自己创建一个在src的根目录下）修改 proxyTable中的内容 module.exports = { d

￡神魔★判官ぃ/ 2023年01月02日 13:29/ 0 赞/ 19 阅读

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

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

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

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

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

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

相关 springboot+vue解决跨域问题

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

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

相关 springboot+vue解决跨域问题

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

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

相关 Vue解决跨域问题

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

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