专栏首页计算机编程【vue随手笔记】webpack解决跨域

【vue随手笔记】webpack解决跨域

前言:跨域问题一直是一个头疼的问题,这里需要详细做一篇文章来记录我解决方式。

webpack 跨域,在这里整理了一下逻辑首先不是为了axios库来进行跨域的,而是直接通过node的webpack设置代理来完成跨域的。

1、设置自定义域:

在config目录下,找到dev.env.js 文件:

文件目录.png

通过添加:

    API_HOST:"http://your.host:yourPort/"

例如:

如图所示.png

注意:这里一定要填写好全地址的域名或调试的ip地址,不要像很多博客中一样选择index中替代的地址,这里把步骤放到第一步,做完全强调!

2、设置index

在config目录下找到index.js文件:

文件目录.png

设置dev下的proxyTable

 proxyTable: {
      '/selfName': {
        target: 'http://your.host:yourPort/',
        changeOrigin: true,
        pathRewrite: {
          '^/selfName': '/'
        }
      }
    },

例如:

如图所示.png

3、设置baseUrl

点击这里查看如何设置BASE_URL 现在将baseurl 改为 :

  const BASE_URL = /selfName/xxx/xxxx

例如:

如图所示.png

4、设置axios的BASE_URL

在route 目录下的index.js中,这样使用:

import axios from "axios";
axios.defaults.baseURL = net.BASE_URL // 这里的net参考之前博客如何设置的静态全局常量

以上方法完全完成了dev 调试的跨域问题,如果是正式版打包的项目需要来进行跨域,那么得找到如图所示的文件:

prod文件.png

回到第一个步骤开始逐步往后重新配置即可实现。

5、cordova项目中,运行在模拟器上的跨域请求:

这里回到BASE_URL上,只需要在原来修改的BASE_URL还原为全域名或者全地址的URL即可,毋须额外操作。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【kotlin】lamda语法兼容问题

    众多的语法中是不是选取自己喜欢的语法就好了呢?答案肯定是否定的。我们接下来看看博主的配置:

    stormKid
  • 批处理dtsmake【仅适合win系统】

    我们先找到dtsmake 的npm 包的链接:https://www.npmjs.com/package/dtsmake 官方wiki实在是太长,我们只看其中...

    stormKid
  • NestJs 静态目录配置

    由于官方文档没有做详细解释说明,那么我们可以从此框架底层入手: 我们知道,nestjs底层用的是express,那么express是通过什么来完成静态目录构建...

    stormKid
  • 如何在解释 TCP/IP 才能让面试官眼前一亮?

    疫情当下,很多企业裁员、倒闭导致了大量程序员不得不重新开始找工作。在严峻的现实情况下,每一次面试机会都需要被牢牢的把握住。

    松鼠专栏
  • Linux和Windows系统常用加固项

    上面只是限制了用户从tty登录,而没有限制远程登录,修改sshd文件将实现对远程登陆的限制

    没有故事的陈师傅
  • Java垃圾回收之jconsole分析

    为了便于观察我们设置了虚拟机的参数 VM oprions , -Xms10m -Xmx10m

    用户5546570
  • 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-入库业务结尾工作-演示单据的打印

    回顾与说明      首先给大家说声抱歉,上一周忙了一些其他的事,博客也就差不多一周没有更新,让关注AgileEAS.NET平台的朋友们久等了,希望大家能继续关...

    魏琼东
  • 关于PWM那些事(3)

    经过前两次的学习,是不是对PWM的基础知识有一些了解呢,今天我们来介绍下PWM时钟和死区时间,依然以飞思卡尔KV4x系列MCU为例 PWM时钟框图 PWM模块的...

    用户1605515
  • 30-STM32+ESP8266+AIR202基本控制篇-功能优化-MQTT服务器配置SSL单向认证(.Windows系统)

    说明 如果设备连接MQTT只走TCP,信息可以用软件监控出来. 为了防止传输的信息被监控,TCP + SSL 使用自带的证书文件(开启单向认证) 1.软件里...

    杨奉武
  • Python 经典面试题 二

    •引用计数:Python在内存中存储每个对象的引用计数,如果计数变成0,该对象就会消失,分配给该对象的内存就会释放出来。•标记-清除:一些容器对象,比如list...

    吾非同

扫码关注云+社区

领取腾讯云代金券