本地运行vue项目跨域问题完美解决方案

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用 vue 开发项目的时候少不了和后端进行联调，假设后端的接口请求路径为 http://test.com/…

然后我们直接使用 npm run serve 启动的服务则是 localhost:8080

这时候直接在项目中请求接口会被跨域请求拦截！下面记录下我解决的过程

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

文章目录

      • 1、使用浏览器特性

      • 2、使用 vue cli 的配置

      • 3、既不想改浏览器，又不想改 host 文件？ 使用 vue 的代理服务解决跨域问题！（也是最常用的）

1、使用浏览器特性

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

Google Chrome可以

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

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

前面有个空格，不要漏了

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


就说明设置成功了

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


我书签和插件呢

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

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

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

2、使用 vue cli 的配置

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

那就深入了解一下，这个 localhost:8080 和 http: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个解决方案，总有一个满足你的要求的！

以上是 本地运行vue项目跨域问题完美解决方案 的全部内容， 来源链接： utcz.com/z/376568.html

回到顶部