解决Vue中的跨域问题

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

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

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

错误内容如图所示：

error.png

---

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

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

---

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

为什么上一个写法会有错误呢？
因为在vue.config.js 的配置中，target 设置的是需要访问的 API 的域名，配置结束后，如果需要访问 https://xx.x.x.x/api/xxxx/xxx，只需要将访问的链接地址设置为 /api/xxxx/xxx 即可，webpack 会进行转发。
即如下所示。

改进后的 请求数据方法：

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

成功请求.png