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

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

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

服务端:

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Charles抓包 - https

    Charles下载地址 关于Charles4.2.1破解,下载完成后替换Charles显示包内容>Contents>Java>charles.jar文件

    程序员不务正业
  • 一段代码看懂Promise

    程序员不务正业
  • iOS客户端配置Exchange邮箱

    程序员不务正业
  • Axios跨域处理方案

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

    吟风者
  • 【思考】为何弃用jQuery?(上)

    关于jQuery想必有点基础的前端开发者都知道,并且知道如何使用它。我也就不多介绍了。

    林小帅
  • 【代码审计】QYKCMS后台任意文件上传、任意文件读取漏洞

    青云客网站管理系统(QYKCMS)是青云客开发的一款基于PHP+MySql的轻量级智能建站系统。在T00ls看到两篇QYKCMS的代码审计文章,也下载了一套回来...

    Bypass
  • 我刚刚混进NYU,参加了「云」展会,近距离看了作品,还跟路人聊了天

    最近,纽约大学Tisch艺术学院就举办了在线论文、作品展——逼真的展厅,实时的人物,很有《我的世界》味道了。

    量子位
  • 最会数据分析的护士!全世界最有名的白衣天使是如何走上可视化之路的?

    大家都知道,护士节是为了几年近代护理学和护理教育的创始人、英国护士弗洛伦斯·南丁格尔(Florence Nightingale)创立的,在1854年到1856年...

    CDA数据分析师
  • 来自预测市场的及时信息(CS CSGT)

    预测市场是从战略代理人那里引出和聚集信念的有力工具。然而,在当前的预测市场中,代理人可能会通过竞争成为第一个更新市场的人来耗尽社会福利。我们开始研究信息被市场聚...

    识檐
  • Apache NiFi的 Write-Ahead Log 实现

    NiFi使用预写日志来跟踪FlowFiles(即数据记录)在系统中流动时的变化。该预写日志跟踪FlowFiles本身的更改,例如FlowFile的属性(组成元数...

    用户5475193

扫码关注云+社区

领取腾讯云代金券