Vue axjx 跨域请求

简介: Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。

跨域请求

1.配置代理(方式一)

Vue代理服务器是一种用于支持Vue应用程序的服务器,它可以帮助开发人员更轻松地实现跨域请求。它可以帮助开发人员更轻松地实现跨域请求,并且可以提供更多的安全性和灵活性。Vue代理服务器可以帮助开发人员更轻松地实现跨域请求,并且可以提供更多的安全性和灵活性。它可以帮助开发人员更轻松地实现跨域请求,并且可以提供更多的安全性和灵活性。

1.安装

npm i axios

2.引入axios

import axios from 'axios'

3.配置代理服务器
image.png

注意配置的代理服务器的端口号3000 为你要请请求的服务器的端口号。

// 开启代理服务器
  devServer:{
   
   
    proxy:"http://localhost:3000"
  }

4.发送请求

注意:axios发送的请求是本地的端口,但是要带请求服务器的地址

image.png

 handsend(){
   
   
       axios.get('http://localhost:8080/index').then(
      response=>{
   
   
       console.log(response.data)
        },
        error=>{
   
   

        }
       )
    }

image.png

1.配置代理(方式二)

用于配置多个代理,pathRewrite重写路径。

 devServer:{
   
   
    proxy:{
   
   
      '/api':{
   
    //以api开头的请求
        target:"http://localhost:3000", //代理目标的基础路径
        pathRewrite:{
   
      //重写路径
          '^/api':''
        },
        ws:true
      },
      '/api2':{
   
   
        target:"http://localhost:3001",
        pathRewrite:{
   
   
          '^/api':''
        },
        ws:true
      }
    }
  }

注意在请求时要加上api的前缀。

 handsend(){
   
   
       axios.get('http://localhost:8080/api/index').then(
      response=>{
   
   
       console.log(response.data)
        },
        error=>{
   
   

        }
       )
    }
目录
相关文章
|
10天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 "ERROR Invalid options in vue.config.js: ‘server’ is not allowed" 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
53 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
13 3
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
18 2
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
13 2