广告位联系
返回顶部
分享到

Vue3跨域解决方案实例介绍

JavaScript 来源:互联网 作者:佚名 发布时间:2023-01-28 13:58:06 人浏览
摘要

vue项目配置代理 vue.config.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies: true, devServer:{ proxy:{ /api:{ target: http://xx.xx.xxx.x

vue项目配置代理

vue.config.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  devServer:{

    proxy:{

        '/api':{

            target: 'http://xx.xx.xxx.xx',

            changeOrigin:true,

            pathRewrite: {

                '^/api': ''

            }

        }

    }

  

}

})

如果是用vue3+ts则在vue.config.ts中添加以下代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

  server: {

// 跨域的写法

    proxy: {

      '/api': {

        target: 'http://nvzu.xxx.cn/', // 实际请求地址

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ""),

      },

    },

  },

// 不跨域的写法

/*   server: {

    host: '192.168.1.195'

    // 0.0.0.0

  }, */

axios.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

"use strict";

  

import axios from "axios";

  

// Full config:  https://github.com/axios/axios#request-config

axios.defaults.baseURL = '/api' || '';

// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

  

let config = {

// 这里的api就是获取configJS中的地址

  baseURL: '/api'

  // timeout: 60 * 1000, // Timeout

  // withCredentials: true, // Check cross-site Access-Control

};

  

const _axios = axios.create(config);

  

_axios.interceptors.request.use(

  function(config) {

    // Do something before request is sent

    return config;

  },

  function(error) {

    // Do something with request error

    return Promise.reject(error);

  }

);

  

// Add a response interceptor

_axios.interceptors.response.use(

  function(response) {

    // Do something with response data

    return response;

  },

  function(error) {

    // Do something with response error

    return Promise.reject(error);

  }

);

export default{

  install:function(app){

    app.config.globalProperties.axios = _axios;

    app.config.globalProperties.$translate = (key) =>{

      return key

    }

  }

}

/* Plugin.install = function(Vue) {

  Vue.axios = _axios;

  window.axios = _axios;

  Object.defineProperties(Vue.prototype, {

    axios: {

      get() {

        return _axios;

      }

    },

    $axios: {

      get() {

        return _axios;

      }

    },

  });

};

Vue.use(Plugin)

export default Plugin; */

页面使用proxy.axios.get/post进行获取跨域接口

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

  

<script>

import {getCurrentInstance} from 'vue'  // 引入Vue3中的getCurrentInstance

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

  

export default {

  name: 'HomeView',

  mounted(){

    const {proxy} = getCurrentInstance();

    console.log(proxy);

    // Axios.get

    proxy.axios.get('/index_category/data').then((e)=>{

      console.log(e);

    })

  },

  components: {

    HelloWorld

  }

}

</script>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/nanchen_J/article/details/125722912?spm=1001.2014.3001.5502
相关文章
  • Angular8升级至Angular13遇到的问题解决

    Angular8升级至Angular13遇到的问题解决
    根据项目需求,需要把Angular版本从8升级到13,无法从8直接升至13,需要一级一级的升级,本文介绍了在升级Angular版本的时候的一种报错和解
  • Vue3跨域解决方案实例介绍
    vue项目配置代理 vue.config.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies:
  • Node.js参数max-old-space-size的介绍
    前言 Old space是 V8 托管(也称为垃圾收集)堆(即 JavaScript 对象所在的位置)中最大和最可配置的部分,而--max-old-space-size标志控制其最大大
  • 用js实现一个网页版节拍器

    用js实现一个网页版节拍器
    平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个。 最后实现的效果如下:ahao430.github.io/metronome/。 代码见github仓库:github.com/
  • js日期格式化yyyy-MM-dd问题

    js日期格式化yyyy-MM-dd问题
    js日期格式化yyyy-MM-dd 方法一 1 2 3 4 5 6 7 8 9 10 11 12 13 function formatDate(date) { console.log(date); // date = new Date(); date = new Date(Date.parse(date.replace(/-/g
  • Nodejs如何解决跨域(CORS)
    Nodejs解决跨域(CORS) 前后端分离的大环境下,受制于同源策略,我们需要懂得实现CORS(Cross-Origin Resource Sharing) 手动配置 在nodejs中,req 和
  • JS图形编辑器场景坐标视口坐标的相互转换

    JS图形编辑器场景坐标视口坐标的相互转换
    图形编辑器的坐标系有两种。 一个是场景(scene)坐标系,一个是视口(viewport)坐标系。视口就是场景的一个子区域。 假设我们的视口的
  • JS图形编辑器实现标尺功能

    JS图形编辑器实现标尺功能
    项目地址: https://github.com/F-star/suika 线上体验: https://blog.fstars.wang/app/suika/ 标尺指的是画布上边和左边的两个有刻度的尺子,作用让用户知
  • JS快速检索碰撞图形之四叉树碰撞检测

    JS快速检索碰撞图形之四叉树碰撞检测
    在上篇文章我们讨论了使用脏矩形渲染,通过重渲染局部的图形来提优化 Canvas 的性能,将 GPU 密集转换为 CPU 密集。 CPU 密集在哪? 在需要
  • three.js简单实现类似七圣召唤的掷骰子

    three.js简单实现类似七圣召唤的掷骰子
    1基本工作 笔者利用业余时间自学了three.js。为了更好的了解WebGL以及更熟练的使用three,想模仿原神中的小游戏七圣召唤中的投掷骰子效果,
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计