vue跨域解决方案之–proxy代理

vue跨域解决方案之–proxy代理声明一个名为axiostest.js的文件//引入axiosimportaxiosfrom’axios’;//创建一个axiosexportletaxios1=axios.create({//设置baseURL是为了之后做代理baseURL:’/api1′,timeout:5000});//创建一个axiosexportletaxios2=axios.create({baseURL:’/api2′,timeout:5000})

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

声明一个名为axiostest.js 的文件

//引入axios
import axios from 'axios';

//创建一个axios
export let axios1 = axios.create({
//设置baseURL是为了之后做代理
  baseURL: '/api1',
  timeout: 5000
});

//创建第二个axios
export let axios2 = axios.create({
  baseURL: '/api2',
  timeout: 5000
});

 配置vue.config.js

module.exports = {
  publicPath: './',
  productionSourceMap: true,
  devServer:{
    // 这里填IP地址
    host: "192.168.666.666",,
    port: 8080,
    open: true, //浏览器自动打开页面
    proxy: {
        //第一个代理,这里的/api1和/api2就对应了第一步的 baseURL
      "/api2": {
        target: "https://www.666.com",//只要是以/api2开头的链接都会被代理到 这个target属性所代表的位置(我这里是:https://www.666.com)
        ws: false,
        changeOrigin: true,
        cookieDomainRewrite: {
          "*": ""
        },
        cookiePathRewrite: {
          "*": ""
        },
        pathRewrite: {
          "^/api2": ""  //这里是将/api2替换为空字符串“” ,也就是删除的意思
        }
      },
        //第二个代理
      "/api1/": {
        target: "http://www.888.com",
        ws: false,
        changeOrigin: true,
        cookieDomainRewrite: {
          "*": ""
        },
        cookiePathRewrite: {
          "*": ""
        },
        pathRewrite: {
          "^/api1": ""
        }
      }
    }
  }
}

配置成功后使用

<script>
//毫无疑问,先引入
import { axios1, axios2 } from '@/libs/axiostest.js'
export default {
  name:'AxiosTest1',
  mounted(){
    this.getMooc();
    this.hotwords();
  },
  methods:{
    getMooc(){
      axios1.get('/products',{
        params:{
          categoryId: 100012
        }
      }).then((data)=>console.log('data',data))
    },
    hotwords(){
      axios2.post('/search/hotwords').then((data)=>console.log('hotwords',data))
    }
  }
}
</script>

访问成功,happy的很,如果有用一键三连 

vue跨域解决方案之--proxy代理

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/187238.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java 动态规划 背包问题[通俗易懂]

    java 动态规划 背包问题[通俗易懂]背包问题具体例子:假设现有容量10kg的背包,另外有3个物品,分别为a1,a2,a3。物品a1重量为3kg,价值为4;物品a2重量为4kg,价值为5;物品a3重量为5kg,价值为6。将哪些物品放入背包可使得背包中的总价值最大?首先想到的,一般是穷举法,一个一个地试,对于数目小的例子适用,如果容量增大,物品增多,这种方法就无用武之地了。  其次,可以先把价值最大的物体放入,这已经是贪

    2022年7月26日
    6
  • 白话空间统计二十四:地理加权回归(一)[通俗易懂]

    白话空间统计二十四:地理加权回归(一)[通俗易懂]当一个数据,在A区域内有很强的解释能力,比如在威海市,人口数量对财政收入的变化,可解释性超过了96%,但是同样居于鲁东的青岛,只有1%,简直就不能用不显著来形容。这种在不同区域具有不同性质的情况,就是在空间分析里面无所不在的空间异质性了……

    2022年10月7日
    3
  • nginx启动成功,访问不了

    nginx启动成功,访问不了前言服务器 阿里云服务器自己弄了个学习的 demo vue springboot 前后端分离 将项目部署到服务器上面 装好 nginx 为了避免冲突 将端口改为了 8001 启动 nginx 发现访问不了 发现问题 1 先查看 nginx 配置是否正确执行下面的命令 nginx t 查看 nginx 配置是否正确也可以切换到 nginx 的安装目录下的 sbin 目录

    2025年6月5日
    3
  • 虚函数

    虚函数虚函数的定义:虚函数必须是类的非静态成员函数(且非构造函数),其访问权限是public(可以定义为privateorproteceted,但是对于多态来说,没有意义。),在基类的类定义中定义虚

    2022年7月4日
    29
  • 指令的四个周期_cpu指令周期流程图

    指令的四个周期_cpu指令周期流程图指令流程图的概念菱形:译码,测试,表示判断,如零指令字是0或者1.与前面的CPU周期紧密相连,不单独占用CPU周期。每个方框箭头下面的是公共操作符符号,表示一条指令结束。mov指令将R1寄存器的数据存储到R2寄存器中,lad指令时间主存中的数据存储到寄存器中。sto是将R2中的数据根据R3中的主存地址存储到主存中。lad和sto是寄存器-主存指令需要三个CPU周期,其他都是寄存器-…

    2022年10月13日
    3
  • 脚本模板[通俗易懂]

    脚本模板[通俗易懂]setignorecase(忽略字符的大小写)简写:seticsetcursorline(设置光标所在行的标识线)简写:setculsetautoindent(设置自动缩进)简写:

    2022年8月6日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号