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 条评论
登录 后参与评论

相关文章

来自专栏晓晨的专栏

ASP.NET Core的身份认证框架IdentityServer4(7)- 使用客户端认证控制API访问

22140
来自专栏Android常用基础

Tinker-使用教程与原理分析(上)

前面我们讲解了AndFix的使用,这篇我们来讲解下微信的Tinker热修复,相比AndFix,Tinker的功能更加全面,更主要的是他支持gradle。他不仅做...

18710
来自专栏JarvanMo的IT专栏

Flutter: Failed to notify project evalution listener

又是一个常见的flutter的环境问题,一般发生在引用了plugin之后。因为默认的gradle,kotlin之类的比较旧,而所引用的plugin里面的grad...

29420
来自专栏专注研发

PageHelper分页插件及通用分页js

物理分页依赖的是某一物理实体,这个物理实体就是数据库,比如MySQL数据库提供了limit关键字,程序员只需要编写带有limit关键字的SQL语句,数据库返回的...

54410
来自专栏云计算教程系列

在CVM上监控其他Centos系统

Alerta是一个Web应用程序,用于合并和删除来自多个监视系统的警报,并在单个屏幕上显示它们。Alerta可以与许多被人们广泛熟知的监控工具集成,如Nagio...

23440
来自专栏开心的学习之路

Fedora27搭建GPU版TensorFlow

主机:华硕(ASUS)G11飞行堡垒 显卡:GeForce 1070 原操作系统为win10,准备安装Fedora 27,从零开始搭建GPU版TensorF...

38170
来自专栏自由而无用的灵魂的碎碎念

用IE打开Reporting Service时提示权限不足的解决方法

在IE中打开http://localhost/ReportServer时,经常提示“为用户“*”授予的权限不足,无法执行此操作。 (rsAccessDenied...

15540
来自专栏数据之美

使用 django-blog-zinnia 搭建个人博客

django-blog-zinnia 虽然小巧,但是具备了个人博客应用的全部基础功能,且具有很高的拓展性,并且开箱即用。以下是官方列出的一些特性: 评论 站...

35390
来自专栏编程思想之路

Android四大组件完全解析(一)---Activity

本文参考\android\android\frameworks\base\core\java\android\app\Activity.java文件中的类注释,...

532100
来自专栏Felix的技术分享

《一个操作系统的实现》笔记(2)--保护模式

41080

扫码关注云+社区

领取腾讯云代金券