axios请求，跨域问题，设置跨域代理

今天药忘吃喽~ 2022-12-22 00:57 355阅读 0赞

生成一个vue项目之后，开始写请求，请求数据，渲染到前端界面，有时候直接请求服务器上的接口，会遇到跨域问题，遇到跨域的时候，需要设置跨域代理~

1：进入新建的项目之中，使用npm安装axios模块。

npm install axios --save

![52de8d0715b848a073f94015589006d1.png][]

2：准备json数据  
自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据  
[http://www.intmote.com/test.json][http_www.intmote.com_test.json]

3：跨域问题，设置代理，利用proxyTable属性实现跨域请求  
在config/index.js 里面找到proxyTable ：\{\} ，然后在里面加入以下代码

proxyTable: {
      '/api': {
        target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //这个是定义要访问的路径，名字随便写 
        }
      }
    },

![dbb492cf7da082ae9eb54ad6cf952f55.png][]

4：打开一个界面test.vue，开始写请求数据的方法  
在写代码之前，要记得引入`import axios from 'axios'`模块。

methods: {
                getData() {
                    axios.get('/api/test.json').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
            }

test.vue参考代码：

<template>
      <div id='app'> axios请求数据</div>
    </template>
    <script>
    import axios from 'axios'
    export default {
      name: 'app',
      data () {
        return {
          itemList: []
        }
      },
      mounted () {
        this.getData()
      },
      methods: {
        getData () {
          axios.get('/api/test.json').then(
            response => {
              console.log(response.data)
            },
            response => {
              console.log('error')
            }
          )
        }
      }
    }
    </script>

6：再次运行  
ctrl+c退出，再次使用命令启动`npm run dev`  
这个时候，我们可以看见，请求的数据，返回值如下  
![ae32c93cde4f8be0cf4a127f765cc88e.png][]

打开network网络请求，可以看见请求已经代理完成~  
http://localhost:8080/api/test.json  
![dfda7cfda0981b808cec157a2501e117.png][]  
![3100d20325cb5aee0004db1e6ce8c5a0.png][]

![d38ee68be6b540a92e054ff2ea5af73a.png][]

[52de8d0715b848a073f94015589006d1.png]: /images/20221120/75435f488b2d4997b7b1be8ae2c24ee9.png
[http_www.intmote.com_test.json]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.intmote.com%2Ftest.json
[dbb492cf7da082ae9eb54ad6cf952f55.png]: /images/20221120/f4db3e809ddb4ee2a563caf2a3601fb9.png
[ae32c93cde4f8be0cf4a127f765cc88e.png]: /images/20221120/3e9603bd8b644043976dd4da6a7483de.png
[dfda7cfda0981b808cec157a2501e117.png]: /images/20221120/9236a42558f747c4af0c6f60c55ef4a0.png
[3100d20325cb5aee0004db1e6ce8c5a0.png]: /images/20221120/236287304255404db97795344f047abc.png
[d38ee68be6b540a92e054ff2ea5af73a.png]: /images/20221120/c7ae79058e2d420ab0c781d22384fc82.png