vue.js跨域问题如何解决

本文小编为大家详细介绍“vue.js跨域问题如何解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue.js跨域问题如何解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1.什么是跨域？

对于问题我们要先知道什么是跨域这样子才可以方便的我们的了解。那么对于跨域简单的来说就是由于浏览器同源策略，一般通过发送请求URL的协议、域名、端口三者之间任意一种与我们当前的页面地址不同的都被称为跨域。如：网络协议不同、端口不同、域名不同、子域名不同、域名和域名对应ip等都被称为跨域。

2.如何解决跨域？

(1)、proxy代理

我们可以在项目中的config或者index.js中添加代码，代码如下：

 proxyTable:  {
      '/api': {
        target: 'http://localhost:8083/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,    //这里true表示实现跨域
        pathRewrite: {
          '^/api':'/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }

在通过 axios 来实现发送访问，在main.js中导入已经安装好的 axios，并挂载到原型上去，代码如下：

import Axios from 'axios'  //导入axios

//将axios挂载到原型上
Vue.prototype.$axios = Axios;

最后我们再通过this.$axios.get().then()来实现数据请求，代码如下：

//发送get请求
show() {
      //用/api來代理'http://localhost:8083'
      this.$axios
        .get("/api/selectall")
        .then(res => {
          this.list = res.data.result;
          // }
        })
        .catch(e => {
          console.log(e);
        });
        },

//发送post请求
add() {
      this.$axios({
        method: "post",
        url: "/api/saveinfo",
        params: {
          name: this.name //传递的参数
        }
      }).then(res => {
                this.show();
      });
    },

读到这里，这篇“vue.js跨域问题如何解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。