解决Vue中的跨域问题

网上方法千千万，由己验明知真假。———— 只灯片笺（简书ID）

本文主要内容：
1. 原为解决跨域问题而配置的文件；
2. 引发跨域问题，错误的网络请求方法；
2. 解决 Vue.js 中 axios 发起网络请求 的 跨越问题；

最近，用 vue.js 编写的前端项目，已近进入到了数据对接的阶段，遂开启了网络的请求；
本以为配置了跨域文件，没啥问题了。
没想到，还是一招不慎，掉入坑里。故而，有此笔记，做一记录。

错误内容如图所示：

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

vue.config.js

    // vue.config.js
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            /*
             * 配置跨域；配置多个跨域；
             * 需要重启项目之后，方能生效；
             */
            '/ssa-ui/api': {
                target: 'http://xx.xx.xxx.xxx:xxxx/ssa-ui/api',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/ssa-ui/api': ''
                }
            },
            '/api': {
                target: 'http://xx.xx.xxx.xxx:xxxx/api',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
        },
        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': 
    // 解决 provisional headers are shown 问题，以及数据不出现的问题；
    headers: {
        'Content-Type': 
        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

main.js

// 引入网络请求
import http from './http'
Vue.prototype.$http = http

2. 引发跨域问题，错误的网络请求方法；

请求数据方法：

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

2. 解决 Vue.js 中 axios 发起 网络请求 的 跨域问题；

改进后的 请求数据方法：

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);
                })
            },
        }
   }