1.跨域设置

加入本地localhost访问接口http://12.3421.45:8080/会抱跨域的错误。
其实开发的话在webpack配置一下proxyTable就OK了，如下

在 config / index.js

dev: {
    加入以下
    proxyTable: {
      '/api': {
        target: 'http://12.3421.45:8080/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''     
          //这里理解成用‘api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://12.3421.45:8080/'，直接写‘api/user/add’即可
          //
        }
      }
    },

在生产production和开发development两种环境分别测试，在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址，所以这样配置：
在 config / dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"' //这里的api就是我们在 config / index.js 中设置的target路径
})

在 config / prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"test"',
  API_HOST: '"http://127.0.0.1:3001/"'
}

2.获取数据

上main我们已经在 dev 和 production 环境下分别设置的接口的路径，接着我们就可以在axios的统一配置中引用了。
我之前的博客使用Axios，讲到过关于axios的一些配置。

1.axios配置文件中
引入 process.env.API_HOST，并作为get/post请求的baseURL

'use strict';

import axios from 'axios';
import qs from 'qs';
const URL = process.env.API_HOST; // 当前环境的接口前缀

// axios拦截器的请求设置
axios.interceptors.request.use(config => { // 这里的config包含每次请求的内容
  // 判断localStorage中是否存在api_token
  if (localStorage.getItem('api_token')) {
    //  存在将api_token写入 request header
    config.headers.apiToken = `${localStorage.getItem('api_token')}`;
  }
  return config;
}, err => {
  return Promise.reject(err);
});

// axios拦截器的响应设置
axios.interceptors.response.use(response => {
  return response;
}, error => {
  return Promise.resolve(error.response);
});

// 检查http状态码返回是否正常
function checkStatus(response) {
  // 如果http状态码正常，则直接返回数据
  if (response && (response.status === 200 || response.status === 304 ||
    response.status === 400)) {
    return response;
  }
  // 异常状态下，把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  };
}

function checkCode(res) {
  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
  if (res.status === -404) {
    alert(res.msg);
  }
  if (res.data && (!res.data.success)) {
    // alert(res.data.error_msg)
  }
  return res;
}
// 请求方式的配置
export default {
  post(url, data) { // post
    return axios({
      method: 'post',
      baseURL: URL,
      url,
      data: qs.stringify(data),
      timeout: 5000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response);
      }
    ).then(
      (res) => {
        return checkCode(res);
      }
    );
  },
  get(url, params) { // get
    return axios({
      method: 'get',
      baseURL: URL,
      url,
      params, // get 请求时带的参数
      timeout: 5000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response);
      }
    ).then(
      (res) => {
        return checkCode(res);
      }
    );
  }
};

1.我们建立publicServer.js管理所有接口

export const AjaxUrl = {
  test: '/hcd'
};

2.在页面中引用，并使用

import {AjaxUrl} from '../common/ajax/serverPublic';

get() {
   this.$ajax.post(AjaxUrl.test).then((response) => {
      console.log(response);
    });
  }

Vue-cli axios获取数据中的跨域问题

1.跨域设置

2.获取数据

猜你喜欢