[绝对有效]axios的CORS跨域限制问题解决方法

axios工具的CORS限制问题解决方法

你是否有这样的困惑：在网上看到很多介绍解决axios的跨域限制问题办法，但自己按步骤操作下来为啥没效果呢？ 根源在于没讲清楚如何才能让vue.config.js文件被自动加载生效。本文就来说说这个问题。

解决 HTTP(S)的CORS限制问题实际上是利用 vue内部的代理转发功能，可以在vue.config.js配置文件中进行配置，而想要让vue.config.js在运行npm run dev时自动加载就需要安装@vue/cli-service才可以，这也是很多人创建了vue.config.js文件后仍然无法使用解决CORS问题的原因。

Vue官方文档中就有这样的说明：

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

接下来要确保我们项目中已经安装了@vue/cli-service(不同项目创建方式可能安装的模块都不太一样):

$ npm list
vue01@0.1.0 ./vue-demo01
├── @babel/core@7.18.10
├── @babel/eslint-parser@7.18.9
├── @vue/cli-plugin-babel@5.0.8
├── @vue/cli-plugin-eslint@5.0.8
├── @vue/cli-service@5.0.8
├── axios@0.27.2
├── core-js@3.24.1
├── eslint-plugin-vue@8.7.1
├── eslint@7.32.0
├── vue-axios@3.4.1
└── vue@3.2.37

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面显示我们已经添加了@vue/cli-service包，若没有，我们可以安装一下:

npm install --save @vue/cli-service
1

接下来，我们才能常使用vue.config.js配置文件。

首先，编辑项目根目录下的 vue.config.js配置文件，添加内容如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/apis': {
        target: 'https://localhost/',
        changOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          '^/apis': ''
        },
        logLevel: 'debug'
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

主要添加的是devServer.proxy配置信息， 将 /apis/.xxxxx路径请求做如下处理:

• 域名替换成 https://localhost/ ，这是访问的目标api服务主机
• 并且将/apis删除掉(替换为空)，这样比如访问 /apis/search/keyword就变成了https://localhost/search/keyword目标地址了。

接下来，修改src/main.js文件，添加内容如下:

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)
axios.defaults.baseURL = '/'
app.config.globalProperties.$axios = axios

app.mount('#app')

1
2
3
4
5
6
7
8
9
10

主要目的有两个:

1. 设置axios默认路径为’/’ ，比如axios访问路径 api/v1/search 实际会将 baseUrl 添加在最前面，变成了 /api/v1/search了 。
2. 设置$axios变量，这样我们在其他组件中可以全局使用 $axios调用API接口了。

最后一步就是实现一个 API调用事件，我们在APP.vue文件中做了如下修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

当我们输入搜索关键词后按回车开始调用API查询并获取结果，当然这里只是简单的对返回结果进行了打印处理。

下面是一个成功调用的结果:

最后

到这里，如果解决了你的问题也好让我也知道，替你开心开心。欢迎一键三十连哈，我是悟空。