在vue.js中怎么解决跨域问题？解决跨域的方法！

猿友 2021-06-16 16:06:12 浏览数 (2452)

在新的框架学习中我们需要学的不仅仅是框架还要学习他的方法，那么就拿vue这个框架来说，在当下也是比价流行使用的，轻量级的特点而且容易掌握。那么今天我们就来说说有关于“在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资料我们都可以 W3cschool中进行搜索相关内容学习和观看视频。