Axios跨域处理方案

程序员不务正业

发布于 2018-08-09 16:56:07

1.1K0

发布于 2018-08-09 16:56:07

文章被收录于专栏：移动端周边技术扩展移动端周边技术扩展

Ajax跨域问题使用jsonp处理

Axios跨域请求问题处理：

1、在config文件夹下的prod和dev的js文件下添加域名

dev:
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"'
});

prod:
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"https://api.douban.com/"'
};

2、在config文件夹下的index.js下对dev环境进行配置

proxyTable: {
      "/api": {
        target: "https://api.douban.com/", //设置你调用的接口域名和端口号
        changeOrigin: true, //跨域
        pathRewrite: {
          "^/api": "/" 
        }
      }
    },

截图：

3873AAD9-2ED6-41F4-B932-76A7234DFB83.png

3、在你二次封装Axios文件内设置Axios.defaults.baseURL

Axios.defaults.baseURL = process.env.API_HOST + "/v2/";

4、正常的axios网络请求

 loadMore({ commit, state }) {
    request({
      url: "/event/list?loc=108288&start=" + state.skip + "&count=10",
      methods: "get",
      params: ""
    })
      .then(function(response) {
        console.log(response);
        commit({
          type: "loadMore",
          res: response.data.events
        });
      })
      .catch(function(error) {
        console.log(error);
      })
      .then(function() {
        console.log("请求最后一步");
      });
  }

生产与开发环境都配置完成了，开发环境可直接进行跨域请求，生产环境还需要后端进行配合处理