Vue实现跨域请求

Vue实现跨域请求

作者：爱编程的小金毛球球

日期：2020年3月20日

一、使用axios实现跨域请求

1.config—>index.js

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      //测试环境
      '/api':{

        target: "https://xxxxxx.com",      //接口域名
        changeOrigin: true,       //是否跨域
        pathRewrite: {
          '^/api': ''    //需要rewrite重写的
        },
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

/api 代表的是你想要跨域的接口域名（名称任意自定义，但注意后续域名接口都要以它来代替）比如要调用’http://192.168.1.1/testdemo‘，直接写‘/api/testdemo’即可。

2.main.js

可以在main.js设置一个基础路径，这样调用接口的时候可以不写api,直接写 /接口名称 即可。在main.js 设置

axios.defaults.baseURL=”/api”; 

然后调用接口的时候可以直接写let url = ”/testdemo”;这样就比较省事。
这里只是提个建议，我在这里就没有这样写。

import axios from 'axios'
import QS from 'qs'	//qs进行数据序列化：npm install qs

Vue.prototype.qs = QS;
Vue.prototype.axios = axios;

3.Vue界面请求接口

this.axios("/api/testdemo").then(res =>{
      // this.axios("http://192.168.1.1/testdemo").then(res =>{ //这样也是可以获取接口数据，只不过没有应用到在config-index.js中自定义的/api
        this.msg = res.data.data.content;
        console.log(res.data.data);
        console.log("请求成功");
      }).catch(err =>){
        console.log("请求错误");
      }

这样就可以实现跨域请求，这里的url都是虚拟地址，只供参考。

二、使用其他方法实现跨域请求

后续补充…