使用 vue 开发项目的时候少不了和后端进行联调,假设后端的接口请求路径为 http://test.com/
然后我们直接使用 npm run serve 启动的服务则是 localhost:8080
这时候直接在项目中请求接口会被跨域请求拦截!下面记录下我解决的过程

我用的 vue -cli 版本 是 3.x 的。所以下面主要讲 vue cli 3.x版本下的解决方案(2.x 其实也大同小异)

1、使用浏览器特性

跨域请求其实无非就是浏览的同源策略(才疏学浅,不知道有没有说错哈)。那我们能不能把这个策略先关掉?让我们安心的调试接口呢?

Google Chrome可以

在这里插入图片描述

你们的 目标 和我的不太一样,目前其实就是这个快捷方式所在的路径,在 目标 后面加上这样一段:

 --args --disable-web-security --user-data-dir=D:\temp

前面有个空格,不要漏了

然后重新打开浏览器看到:

在这里插入图片描述
就说明设置成功了

这时候如果你有在使用谷歌帐号进行同步书签和插件的话,你会发现

在这里插入图片描述
我书签和插件呢

不慌!因为打开了特殊的模式。如果你把刚才的后缀去掉,你会发现其实他们都还在的!

那这种情况下,可以找到谷歌的安装路径,重新新建一个快捷方式,在另外一个快捷方式里面使用上面的方法,那就可以了(相当于用了 2 个浏览器)

这时候你把 vue 项目运行在可跨域浏览器里面就可以发现,请求都正常,也不会被拦截了。


2、使用 vue cli 的配置

毕竟萝卜青菜各有所爱,不一定每个人都习惯用 chrome,我们也应该直面跨域的问题。

那就深入了解一下,这个 localhost:8080http:test.com 到底怎么跨域了

  1. localhost 和 test.com
  2. 8080 和 默认的 80 端口 (端口不一致也是跨域)

解决方法:

1、找到 package.json 文件.看到下面这段默认配置

我们通常用的 npm run serve 其实就是执行了 vue-cli-service serve

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

那根据 vue-cli 的文档 记录

用法:vue-cli-service serve [options] [entry]

选项:

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值:development)
  --host    指定 host (默认值:0.0.0.0)
  --port    指定 port (默认值:8080)
  --https   使用 https (默认值:false)

所以我们把配置改成这样子:

  "scripts": {
    "serve": "vue-cli-service serve --host test.com --port 80",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

改成运行 serve的时候,访问 把localhost换成test.com 并且把端口换为80
浏览器对 80 端口默认是隐藏的。所以我们直接访问 test.com也可以看到自己的项目

重点来了。改了host,根本就跑不起来服务

在这里插入图片描述

这个错误的意思就是 host 本来访问的就是本地的环境 127.0.0.1 然后突然换成了 test.com 外网的环境,那肯定跑不起来。这样一来,我们可以通过修改 host文件 修改test.com的IP指向。
host文件是电脑的文件,不是vue的配置文件,这个自行搜索,不做展开

host文件最后面添加一条

127.0.0.1  test.com

然后重新执行 npm run serve 这时候发现服务已经启动起来了。然后请求接口,假设请求: test.com/api/index/index

然后你会发现接口居然是 404! 为啥呢? 因为我们把 test.com 映射到了本地 127.0.0.1 那自然是没有相关的接口信息了

这时候只需要重新打开host文件 在 刚才加的映射前面加个 ##就是注释的意思

# 127.0.0.1  test.com

重新刷新下页面,发现接口访问正常了!然后serve服务也还在,一点问题都没有!

下次重新启动项目的时候,只需要把注释放开,把test.com映射到本地,启动服务后在注释回去,那 vue项目访问的路径为 test.com:80 而接口也是test.com 那就不会跨域了。完美解决

3、既不想改浏览器,又不想改 host 文件? 使用 vue 的代理服务解决跨域问题!(也是最常用的)

以下内容,如有模糊的地方,请查阅文档 vue-cli 配置

vue-cli3.x 找到 vue.config.js

加上以下配置

  publicPath: '/'
  devServer: {
    proxy: {
      '/api': {
        target: 'test.com',
        changeOrigin: true,
        wx: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

然后问题来了。 api到底是啥,用在哪里?

我一开始也卡在这里!

其实api就是接口实际请求的前缀

比如之前请求接口的时候 url 是这样的:
通常来说我们都会把域名写在一个公共请求方法里面,我们只需要传入要调用的接口的后缀名称
比如 请求 test.com/mobile/index/index 我们只需要传入: mobile/index/index
那么公共的域名就是 test.com/
而你要做的,就是在请求接口的公共域名,把test.com改为api/即可!

改完后,把项目运行起来可以看到接口请求的路径为 : localhost:8080/api/mobile/index/index
而进过代理后,实际的请求路径是 : test.com/mobile/index/index

vue的跨域请求踩坑就到这里了。3个解决方案,总有一个满足你的要求的!

Logo

前往低代码交流专区

更多推荐