html中 axios调用接口跨域_html中 axios调用接口跨域


大家好,我来了,本期为大家带来的前端开发知识是”Web前端:Vue基础-Axios配置内容“,有兴趣做前端的朋友,和我一起来看看吧!

网络请求回顾。我们之前接触过一些,Ajax,jQuery封装过一个,基于XHR对象,我们在小程序中也接触过一个网络请求,request对象。在React中,还接触过一个Fetch对象。在Vue中,我们有与Vue配合比较好的方案:Axios,当然,在Vue最初的时候,官网维护过一个网络请求vue-resource,但是目前已经不推荐使用了。

中文参考地址:https://www.kancloud.cn/yunye/axios/234845

Github参考地址:https://github.com/axios/axios

Axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Features

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

安装


html中 axios调用接口跨域_网络请求_02


引入使用方式

全局配置


html中 axios调用接口跨域_axios get怎么还会显示跨域_03


局部使用


html中 axios调用接口跨域_网络请求_04


请求方式示例

Get请求


html中 axios调用接口跨域_html中 axios调用接口跨域_05


Post请求


html中 axios调用接口跨域_跨域_06


参数注意事项:post请求参数需要的是字符串类型,如:name=iwen@age=20,基于此,我们需要对传递的参数做转换,通过QueryString做转换,qs.stringify({})

并发请求


html中 axios调用接口跨域_跨域_07


配置的默认值/defaults

全局的 axios 默认值


html中 axios调用接口跨域_html中 axios调用接口跨域_08


拦截器


html中 axios调用接口跨域_axios get怎么还会显示跨域_09


设计原则

对于网络请求来说,不是一次性的应用,而是贯穿整个应用的。基于此,我们需要对网络请求进行封装,让我们可以更好的去调用它。而且因为网络请求非常多,所以我们在使用的时候应该对网络请求进行统一的处理和规划。

1. 封装网络请求


html中 axios调用接口跨域_html中 axios调用接口跨域_10


统一处理网络请求


html中 axios调用接口跨域_跨域_11


跨域处理

开发环境

我们编写代码的环境被称为开发环境

跨域解决方案:

1. Proxy代理

他只能解决开发环境下的跨域,上线之后,此种跨域将不再生效

解决两种场景:

1.后台开发者还没有时间处理跨域问题

2.我们自己的模拟数据服务器,例如Mock,产生了跨域

示例代码:

我们需要在项目的根目录下创建一个文件为:vue.config.js。 vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。


html中 axios调用接口跨域_网络请求_12


2. CORS后台解决跨域

实时生效,不区分开发还是生产环境

生产环境

打包上线之后要运行在浏览器中被用户访问的环境

npm run build:运行此命令,可以直接打包项目。

在浏览器中,能运行的代码就只有HTML、CSS和JavaScript及资源文件如:Image

跨域解决方案:

1. CORS后台跨域解决

实时生效,不区分开发还是生产环境