vue axios发送post请求，怎么设置请求头解决跨域

这个问题和vue无关。

跨域请求就会出现这样的问题。

由于CORS（cross origin resource share）规范的存在，浏览器会首先发送一次options嗅探，同时header带上origin，判断是否有跨域请求权限，服务器响应access control allow origin的值，供浏览器与origin匹配，如果匹配则正式发送post请求。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(_或JavaScript框架_)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。作者我也是在2015年就开始用jQuery，那时候跟同事比看谁写的代码更短

如若看个jQuery源码的同学，j应该知道jq是对原生XHR的封装，另外还增加了jsonp的支持，让ajax请求可以支持跨域请求，

但是要注意的是：jsonp请求本质不是XHR异步请求，就是请求了一个js文件，因此在浏览器的network面板中的xhr标签下看不到jsonp的跨域请求，但是在js标签下能看见，因为它利用src特性请求任何一个网站的资源。

ajax常规用法

$.ajax({

url: "https://www.api.com/api/xxx", //ajax请求地址

cache: true,// 默认true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面

type: "GET",//请求方式 "POST" 或 "GET"， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

dataType: "json", //根据返回数据类型可以有这些类型可选：xml html script json jsonp text

timeout：Number //设置请求超时时间(毫秒), 此设置将覆盖全局设置。

//发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1

//如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。

data: {},

//默认true设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它 *** 作必须等待请求完成才可以执行。

async: true,

//发送请求前可修改 XMLHttpRequest 对象的函数。

//XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。

//如果返回false可以取消本次ajax请求，也能设置一些http协议的header头信息。

beforeSend:function(xhr){

// 也可以禁用按钮防止重复提交

$("#submit").attr({ disabled: "disabled" })

},

//context这个对象用于设置ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象(如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数)。

//比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。

context: document.body,

//请求成功后的回调函数

success: function(data,textStatus){

//this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this，那这里的this就是改变过的

},

//请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

//如果发生了错误，错误信息(第二个参数)除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。

error：function(XMLHttpRequest, textStatus, errorThrown){

// 通常 textStatus 和 errorThrown 之中

// 只有一个会包含信息

// this 调用本次AJAX请求时传递的options参数

},

//请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串

complete:function(XMLHttpRequest, textStatus) {

//this 调用本次AJAX请求时传递的options参数

},

//一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：

statusCode:{

404:function(){

alert('404，页面不存在')

}

}

})

ajax.post

$.ajax({

type: "POST",

url: "https://www.api.com/api/xxx",

dataType:'json',

data: {id:1},//也可以是字符串链接"id=1"，建议用对象

success: function(data){

console.log("返回的数据: " + data )

}

})

或者

$.post("https://www.api.com/api/xxx",{id:1},function(data){

console.log("返回的数据: " + data )

},'json')

ajax.get

$.ajax({

type: "GET",

url: "https://www.api.com/api/xxx",

dataType:'json',

data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象

success: function(data){

console.log("返回的数据: " + data )

}

})

或者

$.get("https://www.api.com/api/xxx",{id:1},function(data){

console.log("返回的数据: " + data )

},'json')

ajax.form

$("form").on("submit",function(){

var url = this.action// 可以直接取到表单的action

var formData = $(this).serialize()// 序列化表单数据

$.post(url,formData,function(data){

//返回成功，可以做一个其他事情

console.log(data)

},'json')

//阻止表单默认提交行为

return false

})

ajax.done

ajax请求成功通常是使用回调的方式处理返回数据，其实jquery中也可以使用连写方式而不是回调的方式

// 该参数可以是一个函数或一个函数的数组。当延迟成功时，done中函数被调用,回调执行是依照他们添加的顺序

$.get("https://www.api.com/api/xxx",{id:1}).done(function() {

// 返回成功

}).fail(function(){

// 处理失败

})

ajax.then

$.get("https://www.api.com/api/xxx",{id:1}).then(

function(){

//返回成功

},

function(){

// 处理失败

}

)

ajax.when

两个全部请求成功才会执行回调, 否则就是失败，类似于Promise.all

$.when($.ajax("p1.php"), $.ajax("p2.php"))

.then(

function(){

//两个全部请求成功，才执行

},

function(){

//任何一个执行失败

}

)

ajax.获取文件

$.getScript()：jQuery提供了此方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行

$.getJSON('test.json', function(data) {

// 获取文件成功的回调

})

ajax.load

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中

$('#result').load('ajax/test.html', function() {

alert('Load was performed.')

})

//.load() 方法，与 $.get() 不同，允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器

// 如果test.html接口返回的是个html，则会插入到#container元素中

$('#result').load('ajax/test.html #container')

Axios

特性

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

API

全局

axios.request(config)最终http请求都是执行这个方法

axios(config)和axios.request()等价

axios(url[, config])axios(config)快捷方式

axios.[METHODS](url, config)axios(config)快捷方式

自定义实例

axios.create(config)自定义配置，创建实例instance。调用方式和axios方法一致

拦截器

axios.interceptors.request.use

axios.interceptors.response.use

常见用法

配置优先级：lib/default.js中的库默认值 -->实例的config属性-->请求的config参数

// 全局调用

axios({

method:'get',

url:'https://www.api.com/api/xxx',

field: 123

}) // axios(config)

axios('http://bit.ly/2mTM3nY', {field: 123}) // axios(url[, config])

axios.get('http://bit.ly/2mTM3nY', {field: 123}) // axios.[METHODS](url, config)

// 自定义实例调用

const instance = axios.create({

baseURL: 'https://www.api.com/api/xxx'

})

instance({

method:'get',

url:'2mTM3nY',

field: 123

}) // instance(config)

instance.get('2mTM3nY', {field: 123}) // instance.[METHODS](url, config)

为何axios有如此多使用方式

源码在lib/default.js中

function createInstance(defaultConfig) {

var context = new Axios(defaultConfig)

// instance指向了request方法，且上下文指向context

// instance(config) = Axios.prototype.request(config)

var instance = bind(Axios.prototype.request, context)

// 把Axios.prototype上的方法扩展到instance对象上

// 这样 instance 就有了 get、post、put等METHOD方法

// 同时指定上下文为context，这样执行Axios原型链上的方法时，this会指向context

utils.extend(instance, Axios.prototype, context)

// 把context对象上的自身属性和方法扩展到instance上

utils.extend(instance, context)

return instance

}

// 导出时就创建一个默认实例，所以可以通过axios(config)发出请求

var axios = createInstance(defaults)

axios.Axios = Axios

// 工厂模式创建axios实例，其实最终都是调用createInstance方法。

// 所以实例调用方式和全局axios调用方式相同。instance(config) = axios(config)

axios.create = function create(instanceConfig) {

return createInstance(mergeConfig(axios.defaults, instanceConfig))

}

module.exports = axios

module.exports.default = axios// 允许在ts中导入

重点是createInstance方法，该方法拿到一个Function，该Function指向请求入口Axios.prototype.request，并且该Function还继承了Axios.prototype的每个方法，并且上下文指向同一个对象context。axios包默认导出是该Function，而自定义实例axios.create是一个工厂模式，最终都调用createInstance方法。

vuewebupload怎么添加请求头部内容，最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId

查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)

在这里插入图片描述

接下来看一下如何使用Upload标签实现点击/拖拽上传

如何携带参数, 如何设置headers

<template>

<div>

<Row>

<Col>

<Upload

multiple

type="drag"

:data="submitData"

:headers="upHeaders"

action="/api/cs-dzjf-soa/api/v1/file/upload"

>

<div style="padding: 20px 0">

<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>

<p>点击或拖拽到此处上传</p>

</div>

</Upload>

</Col>

</Row>

</div>

</template>

<script>

import axios from "axios"

export default {

components: {},

name: "first",

data() {

return {

submitData: { // 这里是需要携带的数据

srcLanguage: "en",

tgtLanguage: "zh"

},

upHeaders: { // 这里设置的是请求头中的userId, 用于鉴权的

"userId": "fffffffffffffffffffffffffff"

}

}

},

}

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

效果图如下

在这里插入图片描述

Upload标签中配置的:data就是用于携带参数的, :headers是用于携带头信息的, 请求的url地址中开头位置的api是用于解决跨域的, 具体如何在前端解决跨域参考 前端解决跨域

**这里在headers中不需要配置Content-Type: multipart/form-data, 多此一举

后期补充的问题:

Upload中默认上传时的格式是

file: (binary)

1

1

这里现在使用的后台接口中, 用于接收上传文件的字段是是data, 那么这时候就需要在前台修改一下Upload默认的键名, 百度一番之后, 无果, 决定找一下源码看看, 源码也没找到有用的信息, 在一个github项目上找到了点信息

github地址

在这里插入图片描述

看到这句话 是不是觉得好像有点对症呢???没错, 就是这里可以设置

在这里插入图片描述

在这配置上name属性之后, 我们重新上传一下文件试试

现在已经成功的修改了

---