你了解vue跨越请求吗?(vue的axios跨域请求)

简介: 你了解vue跨越请求吗?(vue的axios跨域请求)
前端和服务器请求数据是很常见的事情,毕竟数据不是死的,而是通过请求服务器给我们返回的动态数据,这样才能保证数据的动态化,那么,在vue里如何来发送请求呢?

    发送请求其实有很多种方案,比如原生的new XMLHttpRequest()来请求,不过很麻烦,几乎不常用。

    然后就是jQuery的封装的一些请求,例如get(),post(),$.ajax()可以简单的来发送请求,但是我们用的是vue框架,所以也不是很推荐用jQuery。

    那我们下来先看看vue是怎么来发送请求的吧:

首先是引入axios的资源包,在vue里是推荐用axios发送请求的

npm i axios

下载好后就可以导入axios请求包

import axios from 'axios'

     我们在不配置任何的情况下,去发送axios请求:

axios({

    url:"/api/eat",
    method:"GET",
  }).then((res)=>{
    console.log(res.data);
  },errot=>{
    console.log("错误");
  })

然后我写了一个测试服务器:

const express = require("express");

let app = express();

app.get('/eat',(request,response)=>{

const a = {
    name:"苹果",
    pre:18,
    love:"yes"
}
console.log("有人请求服务器"+request.url);
response.send(a);

})

app.listen(5000,()=>{

console.log("5000端口已经开启");

})

然后我们去浏览器点击按钮发送请求看看能不能成功

点击发送请求:

     可以看到是收不到数据内容的,为什么呢?其实很简单,我们的前端网站服务器端口是8080,去请求5000端口的数据,因为违背了同源策列,所以是不可能请求到数据的。

    那么,该如何解决呢?办法有两种,第一种是前端找一个代理服务器帮我们发请求,这样就不用我们自己发了,第二种方法就是通过后端的cors来解决跨域问题,针对前后端的解决方案我们都来看一下。

    首先先看一下前端来解决的方法:

vue框架是给我们提供了解决方法的,可以去配置一个中间代理服务器来帮我们请求数据,具体实现如下:

    第一步是打开vue的vue.config.js文件夹,修改成如下代码:

module.exports = {
devServer: {

proxy: {
  '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
  },
  '/foo': {
    target: '<other_url>'
  }
}

}
}
然后简单说一下,target里面的值应该怎么设置,target里面要设置成服务器端口

target: 'http://localhost:5000'

    我这里的服务器是5000端口,所以这里设置的是5000,大家根据自己端口的不同设置即可

这样设置以后,重启vue-cli就可以生效了,代理服务器就设置完成了,这样就可以完成跨域访问数

据了,我们来看一下最终获取数据情况:

这次就完成了请求数据并返回了数据内容。

    那么接下来是第二种后端来解决跨域问题:

在服务器上我们可以设置cors来解决跨域,首先还是安装cors的资源包

npm i cors

安装好后引用require("cors")即可,引用完成后,挂载给路由使用就可以完成跨域解决:

let cors = require("cors")

app.use(cors());
最后也是可以收到数据请求:

最后是后端设置response.setHeader('Access-Control-Allow-Origin', '*')可以让所有的端口都可以访问这个服务器

目录
相关文章
|
26天前
|
缓存 JavaScript 搜索推荐
|
3天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
15 2
|
16天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
52 4
|
18天前
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `&quot;repeat&quot;`,以符合 Django 的解析要求。
16 2
|
24天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
17天前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
56 0
|
JavaScript 前端开发 Java
带你玩转vue——高效封装axios
带你玩转vue——高效封装axios
|
6天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
24 9