Vue cli 跨域问题

在项目过程中忽然遇到报错：

查了一下是关于接口跨域问题的报错。 以下来自 vue-cli 官网

如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

vue-cli跨域 devserver-proxy

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

应用

使用虚拟跨域端口：http://192.164.15.2:8081/XuNi/getConfig vue.config.js文件 在 module.export中加入：

  devServer: {
    proxy: {
      '/XuNi': {
        target: 'http://192.164.15.2:8081',
        ws: true,   // webscoket
        changeOrigin: true,
        secure: false,
      },
    },
  },

封装axios

import axios from 'axios';
import Vue from 'vue';
import VueToasted from 'vue-toasted';
Vue.use(VueToasted);

const service = axios.create({
  baseURL: '/XuNi',
  timeout: 15 * 1000,
});

service.interceptors.request.use(
  config => config,
  err => Promise.reject(err),
);

service.interceptors.response.use(
  (response) => {
    if (!response.data.status) {
      Vue.toasted.show(response.data.info, {
        position: 'top-center',
        duration: 3000,
      });
    }
    return response;
  },
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 400:
          break;
        case 401:
          break;
        case 404:
          break;
        case 405:
          break;
        case 500:
          break;
        default:
      }
    }
    return Promise.reject(error); // 返回接口返回的错误信息
  },
);
export default service;

在页面中引用：

 async getBasic() {
    const res = await request("/getConfig");
 }

更多参数

target：要使用url模块解析的url字符串
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL