Axios常见配置选项跨域详解

目录
  • 常见配置选项
  • 实际项目中的简化写法
  • 并发请求
  • 多个请求接口
  • 实际项目生命周期中使用axios数据存入data()
  • 模块封装
  • 拦截器
  • axios的post的请求头Content-Type
  • axios 全局配置
    • 接口函数的封装配置
    • 设置代理解决请求跨域
  • vue前端跨域

axios : 基于http客户端的promise,面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持.

安装
1.使用npm: npm install axios
2.使用taobao源: cnpm install axios
3.使用bower: bower install axios
4.使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

常见配置选项

get => params
post => data

  • url(必写)请求地址
  • method 请求方法,默认是get
  • baseURL(常用)baseURL会添加到url前(url是绝对地址除外)。
  • transformRequest transformRequest选项允许我们在请求发送到服务器之前对请求的数据做出一些改动 , 该选项只适用于以下请求方式:put/post/patch
  • transformResponse transformResponse选项允许我们在数据传送到then/catch方法之前对数据进行改动
  • headers(常用,如设置请求头json类型) 自定义请求头信息
  • params(常用,只有get请求设置params,其他请求需设置params,即只有get的请求参数位于url后,其他请求参数都在请求体中)
  • params选项是要随请求一起发送的请求参数----一般链接在URL后面
  • data(常用) data选项是作为一个请求体而需要被发送的数据,该选项只适用于方法:put/post/patch
  • 在浏览器上data只能是FormData, File, Blob格式
  • timeout(常用) 超时时间
  • withCredentials 选项表明了是否是跨域请求、默认是default
  • onUploadProgress 上传进度事件
  • onDownloadProgress 下载进度的事件
  • maxContentLength 相应内容的最大值

案例

axios({
    url:'/user',                            //  `url`是服务器链接,用来请求用
    method:`get`,                           //  `method`是发起请求时的请求方法
    baseURL:'http://some-domain.com/api/',  //  `baseURL`如果`url`不是绝对地址,那么将会加在其前面。当axios使用相对地址时这个设置非常方便

    transformRequest:[function(data){       //  `transformRequest`允许请求的数据在传到服务器之前进行转化。只适用于`PUT`,`GET`,`PATCH`方法。数组中的最后一个函数必须返回一个字符串,一个`ArrayBuffer`,或者`Stream`
        //依自己的需求对请求数据进行处理
        return data;
    }],
    transformResponse:[function(data){      //  `transformResponse`允许返回的数据传入then/catch之前进行处理
        //依需要对数据进行处理
        return data;
    }],
    headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定义的要被发送的头信息
    params:{ //`params`是请求连接中的请求参数,必须是一个纯对象,或者URLSearchParams对象
        ID:12345
    },
    paramsSerializer: function(params){//`paramsSerializer`是一个可选的函数,是用来序列化参数,例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
    data:{//`data`是请求提需要设置的数据,只适用于应用的'PUT','POST','PATCH',请求方法。当没有设置`transformRequest`时,必须是以下其中之一的类型(不可重复?):-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。仅浏览器:FormData,File,Blob。仅Node:Stream
        firstName:'fred'
    },
    //`timeout`定义请求的时间,单位是毫秒。
    //如果请求的时间超过这个设定时间,请求将会停止。
    timeout:1000,
    //`withCredentials`表明是否跨域请求,
    //应该是用证书
    withCredentials:false //默认值
    //`adapter`适配器,允许自定义处理请求,这会使测试更简单。
    //返回一个promise,并且提供验证返回(查看[response docs](#response-api))
    adapter:function(config){
        /*...*/
    },
    //`auth`表明HTTP基础的认证应该被使用,并且提供证书。
    //这个会设置一个`authorization` 头(header),并且覆盖你在header设置的Authorization头信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
    //`responsetype`表明服务器返回的数据类型,这些类型的设置应该是
    //'arraybuffer','blob','document','json','text',stream'
    responsetype:'json',
    //`xsrfHeaderName` 是http头(header)的名字,并且该头携带xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN',//默认值
    //`onUploadProgress`允许处理上传过程的事件
    onUploadProgress: function(progressEvent){
        //本地过程事件发生时想做的事
    },
    //`onDownloadProgress`允许处理下载过程的事件
    onDownloadProgress: function(progressEvent){
        //下载过程中想做的事
    },
    //`maxContentLength` 定义http返回内容的最大容量
    maxContentLength: 2000,
    //`validateStatus` 定义promise的resolve和reject。
    //http返回状态码,如果`validateStatus`返回true(或者设置成null/undefined),promise将会接受;其他的promise将会拒绝。
    validateStatus: function(status){
        return status >= 200 &;&; stauts < 300;//默认
    },
    //`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理,在nodejs中。
    //这个允许设置一些选选个,像是`keepAlive`--这个在默认中是没有开启的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),
    //`proxy`定义服务器的主机名字和端口号。
    //`auth`表明HTTP基本认证应该跟`proxy`相连接,并且提供证书。
    //这个将设置一个'Proxy-Authorization'头(header),覆盖原先自定义的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },
    //`cancelTaken` 定义一个取消,能够用来取消请求
    //(查看 下面的Cancellation 的详细部分)
    cancelToke: new CancelToken(function(cancel){
    })
});

实际项目中的简化写法

案例

//全局main.js中已引入axios, 设置baseURL,故写this.axios ,this.axios({url:'xxx' ,medthod:get} ) medthod可以写到前面去 ,全局中baseURL设置了基础路径, url中写基础路径后面的请求部分即可
   this.axios.get('login',{params:{uname:u,upwd:p}}).then(res=>{
              //8:接收服务器返回结果
              //9:如果-1  提示用户名和密码有误
              //10:如果1  跳转商品列表组件  /Product
              if(res.data.code==-1){
                  this.$messagebox("消息","用户名或密码有误");
              }else{
                  this.$toast("登录成功");
                  this.$router.push("/Product");
              }
           })

并发请求

同一个url并发
baseURL全局axios

多个请求接口

不同url
create创建实例

实际项目生命周期中使用axios数据存入data()

实际开发import axios from ‘axios’ 放入全局引入main.js中
获取到的数据 赋值存入data()中,赋值可以写为空数组[] 数值0 空字符串 ’ ’ 形式在data(){}里

模块封装

对比上面每个组件都引入的axios ,以便于修改 才需要实例模块封装
案例
回调函数的方法
src/network/request.js

promise的方法
src/network/request.js

也可以写成

拦截器

vue中axios拦截器使用的图文详解

axios的post的请求头Content-Type

axios的post的请求头Content-Type默认是 application/json;charset=UTF-8

axios.post(url, {}); // Content-Type: application/json;charset=UTF-8

如果把传参改为字符串,请求头的Content-Type会自动变成application/x-www-form-urlencoded

axios.post(url, ''); // Content-Type: application/x-www-form-urlencoded

axios 全局配置

1.安装:

npm install axios --save

2.配置文件

(1)在 src 文件夹中创建 api 文件夹,并创建文件 axios.js 和 index.

 ├── src
 │   ├── api
 ... ...  ├── axios.js  // 请求配置文件,axios的配置都在这里进行
          └── index.js  // 接口函数封装,方便外部调用接口

(2)axios.js文件: axios的配置都在这里进行

/* 1.引入文件 */
import axios from 'axios'        //引入 axios库
import qs from 'qs'              //引入 node中自带的qs模块(数据格式转换)

/* 2.全局默认配置 */
let baseURL
// 判断开发环境(一般用于本地代理)
if (process.env.NODE_ENV === 'development') { // 开发环境
    baseURL = '/api'    // 你设置的本地代理请求(跨域代理),下文会详细介绍怎么进行跨域代理
} else {                                      // 编译环境
    if (process.env.type === 'test') {        // 测试环境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式环境
        baseURL = 'http://sw.api.com'
    }
}
// 配置axios的属性
axios.defaults.timeout = 6000;    // 请求超时时间1分钟
axios.defaults.baseURL =baseURL; // 你的接口地址
axios.defaults.responseType="json";
axios.defaults.withCredentials=false;  是否允许带cookie这些
.....

/*你也可以创建一个实例,然后在实例中配置相关属性,此方法和上面的方法一样,写法不同,怎么用随个人
*喜好,我比较喜欢用这种方法,如下:
*/
const Axios = axios.create({
	baseURL:baseURL , 		      // 后台服务地址
	timeout: 60000, 		      // 请求超时时间1分钟
	responseType: "json",
	withCredentials: false    // 是否允许带cookie这些
});

/* 3.设置拦截器 */
/*如果不是用创建实例的方式配置,那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
时定义的变量*/
Axios .interceptors.request.use((config) => {
    发送请求前进行拦截
    //  可在此处配置请求头信息
	config.headers["appkey"] ="...";
	config.headers["token"] ="...";
           ...
 	if (config.method == "post") {
  /*数据转换: axios post方式默认是json格式提交数据,如果使用application/x-www-form-urlencoded数据格式提交,要用qs.stringify()进行转换,个人建议不在拦截器中全局配置,因为不够灵活,还有一点是,如果
设置了重新请求的配置,那么重新请求时,请求体中的config里面的传参就会被再次进行qs.stringify()转
换,会使得参数丢失,造成请求失败。*/
 		config.data = qs.stringify(config.data)
 	}
	return config;
  },(error) =>{
    //console.log("错误的传参", 'fail');
    return Promise.reject(error)
  })
Axios .interceptors.response.use((res) =>{
   请求响应后拦截
   if(res.status == 200){                       // 对响应数据做些事
       //alert("提交成功")
       return Promise.resolve(res)
    }
    return res;
 }, (error) => {

   //alert("网络异常!") 404等问题可以在这里处理
   return Promise.reject(error)
 })
export default Axios

接口函数的封装配置

(3)index.js文件 接口函数的封装在这里配置,下面以三个请求接口不同的请求方式和数据格式为例。来进行封装示范:

import Axios from "./axios"  // 导入配置好的axios文件
// 封装axios请求函数,并用export导出
export function getItemList(datas) {
    return Axios({
	url: "/api/getItemList",
	method: "post",
	headers: {
	    'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form
	},
	data: datas
    })
}
export function getItem(datas) {
    return Axios({
	url: "/api/getItem",
	method: "post",
	headers: {
	    'Content-Type': 'application/json' //设置请求头请求格式为json
	},
	data: datas
    })
}
export function getItemInfo(datas) {
    return Axios({
	url: "/api/getItemInfo"+datas,
        method: "get",
    })
}

3.在组件中使用上面封装好的三个接口函数

<template>
  <div class="home">

  </div>
</template>
<script>
import qs from 'qs' //引入 node中自带的qs模块(对application/x-www-form-urlencoded数据格式转换)
import { getItemList,getItemInfo } from '@/api'  // 导入 封装的请求函数
export default {
  name: 'HelloWorld',
  data () {
    return {
        getItemListData:{},// getItemList  接口入参
        getItemInfoData:{  // getItemInfo  接口入参
            page:1,
            size:10
        },
    }
  },
  created(){
    getItemList(qs.stringify(this.getItemListData)).then(res=>{
        //这个接口数据是application/x-www-form-urlencoded,所以参数要进行qs转化
        // 请求返回数据
    }).catch(err=>{
        // 请求失败执行
    })
    getItem(this.getItemListData).then(res=>{
        // 请求返回数据
    }).catch(err=>{
        // 请求失败执行
    })
    getItemInfo(`?page=${this.getItemInfoData.page}&size=${this.getItemInfoData.size}`).then(res=>{
        // get请求,url传值。用的是字符串模板传值
        // 请求返回数据
    }).catch(err=>{
        // 请求失败执行
    })
  }
}
</script>

设置代理解决请求跨域

4.设置代理解决请求跨域(如果需要的话) config/index.js
前后端分离开发时会遇到跨域问题,可通过以下配置使用服务器代理解决跨域.
项目打包上线时不存在跨域,可在配置文件中做环境判断。上面的配置文件axios.js文件中已经做了环境判断,所以无需更改。

/*---------------------------(1) 打开config/index.js-------------------------------------------*/
//将文件中的该项配置  proxyTable:{} 修改成如下配置
proxyTable: {
  '/aaa': { // 这个aaa 要与 axios.js 文件中的 baseURL 值对应
    target: 'http://sw.api.com',      // 你接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  }
}

/*---------------------------(2) api/axios.js 文件的基路径配置,开发环境中的baseURL -------------------------------*/
let baseURL
// 判断开发环境(一般用于本地代理)
if (process.env.NODE_ENV === 'development') { // 开发环境
    baseURL = '/aaa'    // 对应上面的代理名 aaa
} else {                                      // 编译环境
    if (process.env.type === 'test') {        // 测试环境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式环境
        baseURL = 'http://sw.api.com'
    }
}

5.多个域名接口代理设置 config/index.js

有时候一个项目,往往涉及多个服务器的接口,域名不一样,所以要进行多个代理设置,代理的设置和第四步一样,那么此时在 api 文件夹中就要配置两份(如下) ,两份文件的配置基本一模一样,唯一的区别在于 各自的 baseUrl 不同,因为他们的接口域名不一样,

 ├── src
 │   ├── api
 ... ...  ├── axios.js
          └── index.js
          ├── axios1.js
          └── index1.js

注:为了api文件夹的简洁以及接口管理方便,对于多域名代理的,建议将对应的axios.js 和 index.js 两个js文件合并成一个js文件,怎么合并就不讲了,懂js的都会,不会的就反思一下,补充下基础知识。

config/index.js 中设置多个代理,如下:

/*---------------------------打开config/index.js-------------------------------------------*/
//将文件中的该项配置  proxyTable:{} 修改成如下配置
proxyTable: {
  // 第一个后台接口域名代理
  '/aaa': { // 这个aaa 要与 axios.js 文件中的 baseURL 值对应
    target: 'http://sw.api.com',      // 你第一个接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },
   // 第二个后台接口域名代理
  '/bbb': { // 这个bbb要与 axios1.js 文件中的 baseURL 值对应
    target: 'http://sg.api.com',      // 你第二个接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },
}
/*---------------------------(1) api/axios.js 文件的基路径配置,开发环境中的baseURL ----------------------------*/
let baseURL
// 判断开发环境(一般用于本地代理)
if (process.env.NODE_ENV === 'development') { // 开发环境
    baseURL = '/aaa'    // 对应上面的第一个代理名 aaa
} else {                                      // 编译环境
    if (process.env.type === 'test') {        // 测试环境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式环境
        baseURL = 'http://sw.api.com'
    }
}

/*---------------------------(2) api/axios1.js 文件的基路径配置,开发环境中的baseURL ----------------------------*/
let baseURL
// 判断开发环境(一般用于本地代理)
if (process.env.NODE_ENV === 'development') { // 开发环境
    baseURL = '/bbb'    // 对应上面的第二个代理名 bbb
} else {                                      // 编译环境
    if (process.env.type === 'test') {        // 测试环境
        baseURL = 'http://sg.apitest.com'
    } else {                                  // 正式环境
        baseURL = 'http://sg.api.com'
    }

vue前端跨域

第一步:在自己封装的API里全局config里配置post 请求头

第二步:去config.js进行配置

到此这篇关于Axios常见配置选项跨域详解的文章就介绍到这了,更多相关axios跨域配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-02

Vue3配置axios跨域实现过程解析

实现跨域共3个步骤: 1,vue3.0根目录下创建vue.config.js文件: module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } }

Vue3.0 axios跨域请求代理服务器配置方式

目录 axios跨域请求代理服务器配置 axios跨域问题解决 1.在vue.config.js文件中做如下配置 2.request.js(拦截器页面)如下配置 3.具体请求页面如下配置 axios跨域请求代理服务器配置 首先安装axios npm install axios 然后在vue.config.js文件下配置如下代码 (若没有vue.config.js文件可以自己创建这个文件) module.exports = { devServer: { open: true, port: 8001

vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台. 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,如果你用axios,关于代理的配置,如下: 在vue.config.js中配置: 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

axios中cookie跨域及相关配置示例详解

前言 最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. 1. 带cookie请求 - 画个重点 axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决. 这个时候需要注意需要后端配合设置: header信息 Access-Control-Allow-Credentials:true Access

jQuery 跨域访问解决原理案例详解

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

java中Servlet监听器的工作原理及示例详解

监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 监听器原理 监听原理 1.存在事件源 2.提供监听器 3.为事件源注册监听器 4.操作事件源,产生事件对象,将事件对象传递给监听器,并且执行监听器相应监听方法 监听器典型案例:监听window窗口的事件监听器 例如:swing开发首先制造Frame**窗体**,窗体本身也是一个显示空间,对窗体提供监听器,监听窗体方法调用或者属性改变:

SSM框架整合JSP中集成easyui前端ui项目开发示例详解

目录 前言 EasyUI下载与配置 页面美化 运行结果 总结与问题 前言 前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置 使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j

SpringMVC域对象共享数据示例详解

目录 SpringMVC域对象共享数据 一.域对象 1. 域对象的作用 2. 域对象生命周期 3. 使用原则 二.向域对象共享数据 1. 向 request 域对象共享数据 2. 向 session 域共享数据 3. 向 application 域共享数据 SpringMVC域对象共享数据 一.域对象 1. 域对象的作用 就是在一定范围内可以共享数据,通常有 3 种: request: 一次请求,多个资源共享数据 session: 默认一次会话,多个请求,多个资源共享数据 servletCont

Pandas中八个常用option设置的示例详解

目录 前言 1. 显示更多行 2. 显示更多列 3. 改变列宽 4. 设置float列的精度 5. 数字格式化显示 用逗号格式化大值数字 设置数字精度 百分号格式化 6. 更改绘图方法 7. 配置info()的输出 8. 打印出当前设置并重置所有选项 前言 通过pandas的使用,我们经常要交互式地展示表格(dataframe).分析表格.而表格的格式就显得尤为重要了,因为大部分时候如果我们直接展示表格,格式并不是很友好. 其实呢,这些痛点都可以通过pandas的option来解决.短短几行代码

JavaScript中的ajax功能的概念和示例详解

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Django中的模型类设计及展示示例详解

django中设计数据模型类是基于ORM的对象关系映射更方便的进行数据库中的数据操作. 对象关系映射 把面向对象中的类和数据库表--对应,通过操作类和对象,对数表实现数据操作,不需要写sql,由ORM框架生成 django实现了ORM框架,在项目中与数据库之间产生桥梁作用 django数据库定义模型的步骤如下: python manage.py makemigrations python mange.py migrate 在应用models.py中编写模型类,继承models.Model类 在模

在Android环境下WebView中拦截所有请求并替换URL示例详解

需求背景 接到这样一个需求,需要在 WebView 的所有网络请求中,在请求的url中,加上一个xxx=1的标志位. 例如 http://www.baidu.com 加上标志位就变成了 http://www.baidu.com?xxx=1 寻找解决方案 从 Android API 11 (3.0) 开始,WebView 开始在 WebViewClient 内提供了这样一条 API ,如下: public WebResourceResponse shouldInterceptRequest(Web

java中常见的6种线程池示例详解

之前我们介绍了线程池的四种拒绝策略,了解了线程池参数的含义,那么今天我们来聊聊Java 中常见的几种线程池,以及在jdk7 加入的 ForkJoin 新型线程池 首先我们列出Java 中的六种线程池如下 线程池名称 描述 FixedThreadPool 核心线程数与最大线程数相同 SingleThreadExecutor 一个线程的线程池 CachedThreadPool 核心线程为0,最大线程数为Integer. MAX_VALUE ScheduledThreadPool 指定核心线程数的定时