Axios跨域处理方案

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": "/" 
        }
      }
    },

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("请求最后一步");
      });
  }

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

服务端:

后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券