文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue解决ajax跨域的问题

2023-05-14 08:37

关注

(一)什么是跨域

同源请求就是指协议名、主机名、端口号三者一样

跨域请求:是指协议名、主机名、端口号三者有任何一个不一样,而且跨域请求是请求发出去了,服务器接收并返回了结果,只是浏览器没有接收响应结果。跨域如果不进行处理会报错

(二)axios请求

(1)请求方式

  1. xhr方法: new XMLHttpRequest()   xhr.open() xhr.send()
  2. jQuery方法: $get $post
  3. axios :(基于Promise风格,现在用的较多)
  4. fetch:(基于Promise风格),fetch的兼容性较差
  5. jQuery和axios 是对 xhr方法的封装,而fetch方法和xhr方法是平级的,都在window对象身上。

(2)如何发送axios请求

1、在vscode终端输入命令 npm  axios进行安装

2、在App.vue中进行引入 import  axios from 'axios'

3、发送请求

axios.get('url地址').then(

          respone=>{

            console.log('请求成功了',respone.data)

          },

          error=>{

            console.log('请求失败了',error.message)

          }

(三)配置代理解决跨域问题

原理:设置一个代理服务器,它的协议名、主机名、端口号和前端的一模一样,这样前端访问该代理服务器就没有跨域问题了。

当该代理服务器收到前端的请求,再向其他服务器发送该请求,获取数据,之后将数据返回给前端。

(1)方法一:使用vuecli配置代理服务器

1、开启server1服务器

2、vue.config.js:用来配置脚手架的全局配置,在module.exports中加入如下配置

devServer:{

    proxy:'http://localhost:5000'

    //语法:proxy:'协议名://主机名:端口号'

  }

当前浏览器地址端口号为8080,需要向后端端口号为5000的地址请求数据,出现跨域问题,使用代理服务器

3、在终端安装axios,在app.vue中引入axios,再发送get请求

<template>

    <button @click="getStudent">获取学生信息</button>

</template>

<script>

import  axios from 'axios'

export default {

    name:'App',  

    methods:{

      getStudent(){

        axios.get('http://localhost:8080/students').then(

          respone=>{

            console.log('请求成功了',respone.data)

          },

          error=>{

            console.log('请求失败了',error.message)

          }

        )

      },

    }

}

</script>

4、请求数据如下

 5、用vuecli配置代理服务器的缺点

5.1 当请求的资源代理服务器本身就有,就不会转发请求,public文件夹中的东西就是代理服务器的资源。

例如:请求名称和public文件夹中资源的名称同名就会返回public中的资源,

请求结果为

5.2 只能配置一个请求代理服务器,即只能向一个服务器转发请求

(2)方法二

1、开启两个服务器

2、vue.config.js的第二种配置,可以配置多台服务器,也不会出现public中同名请求错资源问题

devServer: {
    proxy: {
      '/xkx': {// '/xkx'请求前缀,表示只要请求前缀是/xkx就走代理
        target: 'http://localhost:5000',
        // 将以xkx开头的请求,将开头的/xkx去掉,否则目标服务器会找不到路径的
        pathRewrite: { '^/xkx': '' },
        ws: true,//用于支持webscoket

        //用与向目标服务器说明自己是哪台服务器(即配置请求头host)
        // 如果为false则自己是哪台服务器就说是哪台(host为8080)
        // 如果为true,则目标服务器是哪台就说自己是哪台服务器(host为5000)
        changeOrigin:true
      },
      // 可以设置多台服务器
      '/kk': {
        target:'http://localhost:5001',
        pathRewrite: { '^/kk': '' },
        ws: true,
        changeOrigin:true
      }
    }
  }

3、App.vue中发送两个请求

 methods:{

      getStudent(){

        axios.get('http://localhost:8080/xkx/students').then(

          respone=>{

            console.log('请求成功了',respone.data)

          },

          error=>{

            console.log('请求失败了',error.message)

          }

        )

      },

      getCars(){

        axios.get('http://localhost:8080/kk/cars').then(

          respone=>{

            console.log('请求成功了',respone.data)

          },

          error=>{

            console.log('请求失败了',error.message)

          }

        )

      }

    }

4、请求数据结果

 到此这篇关于Vue解决ajax跨域的问题的文章就介绍到这了,更多相关Vue解决ajax跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯