vue 公理发送post请求,如何设置请求头解决跨域(vue的http请求是什么插件)

原创 程序编程代写  2021-09-26 23:41:08  阅读 6 次 评论 0 条
摘要:

vue公理发送post请求,如何设置请求头解决跨域vue跨域可以使用自带的proxyTable功能,打开项目找到confiG/index。js搜索proxyTable参数,修改如下:代理表:{/ABC:{目标:http://192.168。3.100,安全:假,changeOrigin:真,}},这个问题与vue无关。跨域请求会出现这样的问题。由于cors(跨域资源共享)规范

vue 公理发送post请求,如何设置请求头解决跨域

vue跨域可以使用自带的proxyTable功能,打开项目找到confiG/index。js搜索proxyTable参数,修改如下: 代理表:{ /ABC:{ 目标:http://192.168。3.100, 安全:假, changeOrigin: 真, } },

这个问题与vue无关。 跨域请求会出现这样的问题。 由于cors(跨域资源共享)规范的存在,浏览器会先发送一个options sniffing,同时header会带上origin来判断是否有跨域请求权限。服务端响应浏览器的访问控制allow origin的值和origin匹配,如果匹配,则正式发送post请求。

vue http请求主要用什么插件

公理

基于Promise的HTTP请求客户端,可以同时在浏览器和节点。在js中使用

特征

在浏览器中发送 XMLHttpRequests 请求

在节点。js发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

自动转换JSON数据

客户端支持保护安全免受 XSRF 攻击

安装

使用凉亭:

$ bower 安装 公理

使用 npm:

$ npm 安装 公理

例子

发送 GET 请求

// 向具有给定 ID公理 的用户发出请求。get(‘/userID=12345’)。然后(功能(响应){控制台。日志(响应);  })。捕获(功能(响应){控制台。日志(响应);  });
// 可选地,上述请求也可以通过 as公理 完成。get(‘/user’, {参数: {ID: 12345} })。然后(功能(响应){控制台。日志(响应);  })。捕获(功能(响应){控制台。日志(响应);  });

发送 POST 请求

公理。post(‘/user’, {firstName:‘Fred’, lastName:‘Flintstone’ })。然后(功能(响应){控制台。日志(响应);  })。捕获(功能(响应){控制台。日志(响应);  });

发送多个并发请求

function getUserAccount() {返回 公理。get(‘/user/12345’);}function getUserPermissions() {return 公理。get(‘/user/12345/permissions’);}公理。所有([getUserAccount(),getUserPermissions()])。然后(轴。spread(function (acct, perms) {// 现在两个请求都完成了 }));

axios API

可以通过向 axios 传递相应的参数来自定义请求:

axios(config)// 发送 POST 请求axios({ method:‘post’, url:‘/user/12345’, data: {firstName:‘Fred’, lastName:‘Flintstone’ }});axios(url[, config])// 发送一个 GET 请求(默认方法)axios(‘/user/12345’);

请求方法别名

为方便起见,我们为所有支持的请求方法提供了别名

axios。get(url[, config])axios。删除(网址 [,配置])axios。头(网址[,配置])轴。post(url[, data[, config]])axios。put(url[, data[, config]])axios。补丁(网址[,数据[,配置]])

注意

使用alias方法时,不需要在config参数中指定url、method和data属性。

同时

处理并发请求的帮助方法

axios。所有(可迭代)

axios。传播(回调)

创建实例

您可以使用自定义配置创建一个新的 axios 实例。

axios。create([config])var 实例 = axios。创建({ baseURL:‘https://some-domain。com/api/’, timeout: 1000, 标题: {‘X-Custom-Header’:‘foobar’}});

实例方法

下面列出了所有可用的实例方法,指定的配置将与实例的配置合并。

axios#要求(config)axios#get(url[, config])axios#delete(url[, config])axios#head(url[, config])axios#post(url[, data[, config]]) axios#put(url[, data[, config]])axios#patch(url[, data[, config]])

请求配置

以下是可用的请求配置项,只需要url。如果未指定方法,则默认请求方法为 GET。

{// `url` 是将用于请求的服务器 URL url:‘/user’, // `method` 是发出请求时使用的请求方法 method:‘get’, // default / / `baseURL` 将被添加到 `url` 前,除非 `url` 是绝对的。// 可以方便地为 axios 的实例设置 `baseURL` 以将相对 URL // 传递给该实例的方法。baseURL:‘https://some-domain。com/api/’, // `transformRequest` 允许在将请求数据发送到服务器之前对其进行更改 // 这仅适用于请求方法 ‘PUT’、‘POST’ 和‘PATCH’ // 最后一个函数在数组中必须返回一个字符串或一个ArrayBuffer transformRequest: [function(data) {// 做任何你想转换的数据返回数据;  }], // `transformResponse` 允许在响应数据之前进行更改 // 将其传递给 then/catch transformResponse: [function (data) {// 做任何你想转换的数据 return data;  }], // `headers` 是要发送的自定义头 headers: {‘X-Requested -With’:‘XMLHttpRequest’}, // `params` 是要随请求参数一起发送的 URL 参数:{ID: 12345 }, // `paramsSerializer` 是一个可选函数,负责序列化 `params` // (e。g。https://www。npmjs。com/package/qs, http://api。查询。com/jquery。param/) paramsSerializer: function(params) {return Qs。stringify(params, {arrayFormat:‘brackets’}) }, // `data` 是作为请求体发送的数据 // 仅适用于请求方法‘PUT’、‘POST’和‘PATCH’ //当没有设置 `transformRequest` 时,必须是字符串、ArrayBuffer 或哈希数据:{firstName:‘Fred’ }, // `timeout` 指定请求超时前的毫秒数。// 如果请求时间超过`timeout`,请求将被中止。timeout: 1000, // `withCredentials` 指示是否应该使用凭据进行跨站点访问控制请求 // withCredentials: false, // 默认 // `adapter` 允许自定义处理请求,从而使测试更容易。// 调用 `resolve` 或 `reject` 并提供有效的响应(参见 [响应文档](#response-api))。适配器:功能(解决,拒绝,配置){/*。*/ }, // `auth` 表示应该使用 HTTP Basic auth,并提供凭据。// 这将设置一个 `Authorization` 标头,覆盖您使用 `headers` 设置的任何现有的 // `Authorization` 自定义标头。auth: {username:‘janedoe’, password:‘s00pers3cret’} // `responseType` 表示服务器将响应的数据类型 // 选项是‘arraybuffer’,‘blob’,‘document’,‘json’ ,‘text’ responseType:‘json’, // 默认 // `xsrfCookieName` 是用作 xsrf 令牌值的 cookie 名称 xsrfCookieName:‘XSRF-TOKEN’, // 默认 // `xsrfHeaderName` 是携带 xsrf 令牌值的 http 标头的名称 xsrfHeaderName:‘X-XSRF-TOKEN’, // 默认 // `progress` 允许处理 ‘POST’ 和 ‘PUT 上传’ // 以及 ‘GET ’downloads progress: function(progressEvent) {// 对原生进度事件做任何你想做的事情 }}

响应数据结构

响应数据包括以下信息:

{// `data` 是服务器提供的响应 data: {}, // `status` 是服务器响应中的 HTTP 状态代码 status: 200, // `statusText` 是来自服务器的 HTTP 状态消息server response statusText:‘OK’, // `headers` 服务器用 headers 响应的 headers: {}, // `config` 是为请求提供给 `axios` 的配置:{}}

使用 then 或 catch 时,会收到如下响应:

axios。获取(‘/用户/12345’)。然后(功能(响应){控制台。日志(响应。数据); 安慰。日志(响应。地位); 安慰。日志(响应。状态文本); 安慰。日志(响应。标题); 安慰。log(response。配置);});

默认分配

您可以为每个请求指定默认配置。

全局 axios 默认配置

axios。默认值。baseURL =‘https://api。例子。com’;axios。默认值。headers。共同[‘授权’] = AUTH_TOKEN;axios。默认值。headers。post[‘Content-Type’] =‘application/x-www-form-urlencoded’;

自定义实例默认配置

// 在创建 instancevar instance = axios 时设置配置默认值。创建({ baseURL:‘https://api。例子。com’});// 实例创建后改变默认值。默认值。headers。共同[‘授权’] = AUTH_TOKEN;

配置优先级

配置将按优先顺序合并。顺序是在 lib/默认值 中找到的库默认值。js,然后是实例的默认属性,最后是请求的配置参数。后者优先于前者。这是一个例子。// 使用库提供的配置默认值创建一个实例// 此时超时配置值为`0`,这是libraryvar instance = axios 的默认值。create();// 覆盖库的超时默认值// 现在所有请求都将等待 2。超时前 5 秒。defaults。timeout = 2500;// 覆盖此请求的超时时间,因为它需要很长时间的实例。get(‘/longRequest’, {timeout: 5000});

拦截器

您可以在处理 then 或 catch 之前拦截请求和响应

// 添加请求拦截器

axios。拦截器。request。use(function (config) {// 在发送请求之前做一些事情 return config; }, function (error) {// 做一些有请求错误的事情 return Promise。拒绝(错误);  });

// 添加响应拦截器

axios。拦截器。response。use(function (response) {// 用响应数据做某事 return response; }, function (error) {// 用响应做某事错误 return Promise。拒绝(错误);  });

移除拦截器:

var myInterceptor = axios。拦截器。request。使用(函数(){/*。*/});axios。拦截器。request。弹出(我的拦截器);

您可以将拦截器添加到自定义 axios 实例:

var instance = axios。创建();实例。拦截器。request。使用(函数(){/*。*/});

错误处理

axios。获取(‘/用户/12345’)。catch(function (response) {if (response instanceof Error) {// 设置触发错误控制台的请求时发生了一些事情。日志(‘错误’,响应。message);} else {// 请求已发出,但服务器响应的状态码超出了 2xx 控制台的范围 //。log(response。数据); 安慰。log(response。地位); 安慰。log(response。标题); 安慰。log(response。配置);} });

承诺

axios 依赖于原生的 ES6 Promise 实现。如果你的浏览器环境不支持 ES6 Promises,则需要引入一个 polyfill

vuejs如何获取请求参数

vue-router 文档 $route。params 参考vue-router文档,params参数对象可以通过$route对象获取。同时transition对象的to和from可以得到$route对象。

如果使用 vue 加 vue-router 加 vue-resource 进行客户端渲染,则查询字符串应使用路由中的查询属性。查看 vue-router 文档。 感觉你的用法应该是错误的,因为你说的setattribute是java服务端渲染的用法,这种方式只能在jsp中获取 建议仔细看vue官方教程下构建大型应用的底层示例:https://github。com/vuejs/vue-hackernews

本文地址:http://www.mjgy888.com/post/17263.html
版权声明:本文为原创文章,版权归 程序编程代写 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?