解决Vue中的跨域问题

• 原为解决跨域问题而配置的文件；
• 引发跨域问题，错误的网络请求方法；
• 解决 Vue.js 中 axios 发起网络请求 的 跨越问题；

错误内容如下：

1. 原为解决跨域问题而配置的文件；

vue.config.js (每次更改完配置文件，记得运行npm run serve命令，进行重启，不然你会陷入极度的郁闷中，为什么不生效。)
vue.config.js，这个文件是自己创建的，为了解决vue-cli 3.0版本下的跨域问题；
特别需要注意的是，proxy中的target配置；

    // vue.config.js，这个文件是自己创建的，为了解决vue-cli 3.0版本下的跨域问题；
    // 特别需要注意的是，proxy中的target配置；
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            /*
             * 配置跨域；配置多个跨域；
             * 需要重启，方能生效；
             */
            // paths
            '/ssa-ui/api': {
                target: 'http://xx.xx.xx.xxx:xxxx/ssa-ui/api',  //跨域地址
                changeOrigin: true,  // 是否跨域
                ws: true,  // 是否使用https
                pathRewrite: {
                    '^/ssa-ui/api': ''
                    // 此处可以理解为 '/ssa-ui/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /ssa-ui/api 替代
                    // 比如，调用 http://xx.xx.xx.xxx:xxxx/ssa-ui/api/query-engine/line-chart ，直接写 /ssa-ui/api/query-engine/line-chart 即可
                }
            },
            '/api': {
                target: 'http://xx.xx.xx.xxx:xxxx/api',  //跨域地址
                changeOrigin: true,  // 是否跨域
                ws: true,  // 是否使用https
                pathRewrite: {
                    '^/api': ''
                    // 此处可以理解为 '/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /api 替代
                    // 比如，调用 http://xx.xx.xx.xxx:xxxx/api/row4 ，直接写 /api/row4 即可
                }
            }
        },
        before: app => {
        }
    }

http.js

// 如文件名叫http.js
import axios from 'axios'

// 创建实例时设置配置的默认值
var instance = axios.create({
    // http://10.10.12.229:9011/api/
    // baseURL: 'http://10.10.12.229:9011/api/',
    timeout: 5000,
    // 加入：'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'，
    // 解决 provisional headers are shown 问题，以及数据不出现的问题；
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8;',
        Accept:'application/json'
    },
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    /**
     1、比如添加token之类的请求头信息
     2、添加每次请求loading等
     */
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    /**
     1、集中处理响应数据（如错误码处理）
     */
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

请求数据方法：

export default {
        name: "SafeThingTrendLineChart",
        methods: {
            getData() {
                this.$http({
                    method: 'GET',
                    url: '/ssa-ui/api/query-engine/pie-chart',
                }).then((response) => {
                    // 200响应
                    console.log(response);
                }, (err) => {
                    // 500响应
                    console.log(err);
                })
            },
        }
   }