亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

跨域Ajax之ContentType:application/json

標簽:
JavaScript

在使用Ajax跨域请求时,如果设置Header的ContentType为application/json,会分两次发送请求。第
一次先发送Method为OPTIONS的请求到服务器,这个请求会询问服务器支持哪些请求方法(GET,POST等),
支持哪些请求头等等服务器的支持情况。等到这个请求返回后,如果原来我们准备发送的请求符合服务器的规
则,那么才会继续发送第二个请求,否则会在Console中报错。

为什么在跨域的时候设置ContentType为application/json时会请求两次?其实JQuery的文档对此有做
说明。

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: Boolean or String

When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

注意Note后面的描述,在跨域的时候,除了contentType为application/x-www-form-urlencoded, multipart/form-data或者text/plain外,都会触发浏览器先发送方法为OPTIONS的请求。

比如说,你原来的请求是方法方法POST,如果第一个请求返回的结果Header中的Allow属性并没有POST方法,
那么第二个请求是不会发送的,此时浏览器控制台会报错,告诉你POST方法并不被服务器支持。

下面看下OPTIONS请求的返回图

webp

图中箭头指向的Allow就是服务器返回的支持的方法。

不仅如此,如果想要用ContentType:application/json发送跨域请求,服务器端还必须设置一个名为
Access-Control-Allow-Headers 的Header,将它的值设置为 Content-Type,表明服务器能够接收
到前端发送的请求中的ContentType属性并使用它的值。否则第二次请求也是发不出去的,浏览器console会
报错,并提示你服务器没有设置Access-Control-Allow-Headers。

原文出处:http://www.foreverpx.cn
转载请注明出处。



作者:foreverpx
链接:https://www.jianshu.com/p/fddd19669ab3


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消