2020-05-15axios请求，跨域问题，设置跨域代理

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

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

npm install axios --save

2：准备json数据

自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据

http://www.intmote.com/test.json

3：跨域问题，设置代理，利用proxyTable属性实现跨域请求

在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代码

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

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><divid='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

这个时候，我们可以看见，请求的数据，返回值如下

打开network网络请求，可以看见请求已经代理完成~

http://localhost:8080/api/test.json

作者：祈澈菇凉

链接：https://www.jianshu.com/p/9be22b9c9336

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。